/* eslint-disable prettier/prettier */
import CheckBox from '@react-native-community/checkbox';
import Moment from 'moment';
import React from 'react';
import {Dimensions, Image, SafeAreaView, View} from 'react-native';
import {BarChart} from 'react-native-chart-kit';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SelectDropdown from 'react-native-select-dropdown';
import {ScrollView} from 'react-native-virtualized-view';
import AppText from '../../components/AppText';
import ButtonComponent from '../../components/ButtonComponent';
import LoadingProgress from '../../components/LoadingProgress';
import {IMAGES} from '../../values/images';
import {contentStyle, mainStyle, styles} from './style';
const WorkLoadScreen = ({
  userDetails,
  table,
  openTimePicker,
  timeFilter,
  toggleCheckBox,
  setToggleCheckBox,
  showDatePicker,
  hideDatePicker,
  handleConfirm,
  onSubmitFilter,
  dataChart,
  isLoading,
  chooseMonth,
  setChooseMonth,
  nextPage,
  prevPage,
  infoTable,
  lastPage,
  payload,
  firstPage,
}) => {
  const chartConfig = {
    backgroundGradientFrom: '#FFF',
    backgroundGradientFromOpacity: 1,
    backgroundGradientTo: '#FFF',
    backgroundGradientToOpacity: 0.5,
    color: () => '#ed642d',
    labelColor: () => '#3d3737',
    strokeWidth: 2, // optional, default 3
    barPercentage: 1,
    useShadowColorFromDataset: false, // optional
  };
  //console.log("table")
  return (
    <SafeAreaView>
      <ScrollView nestedScrollEnabled={true}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            backgroundColor: 'white',
            marginTop: 10,
          }}>
          <AppText style={contentStyle.txtTitle}>
            Thống kê phạm vi trong kỳ
          </AppText>
          <SelectDropdown
            data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
            defaultValue={chooseMonth.getMonth() + 1}
            dropdownIconPosition={'right'}
            buttonStyle={{
              ...styles.dropdown1BtnStyle,
              width: '40%',
              backgroundColor: 'white',
            }}
            onSelect={selectedItem =>
              setChooseMonth(
                new Date(`${selectedItem}/01/${new Date().getFullYear()}`),
              )
            }
            dropdownStyle={{
              ...styles.dropdown1DropdownStyle,
            }}
            rowStyle={styles.dropdown1RowStyle}
            rowTextStyle={{color: '#444', textAlign: 'center'}}
            buttonTextStyle={{color: '#444', textAlign: 'center'}}
            renderDropdownIcon={isOpened => {
              return (
                <Image
                  source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow}
                  style={{
                    width: 20,
                    height: 20,
                    marginRight: 10,
                  }}
                />
              );
            }}
          />
        </View>
        <ScrollView horizontal={true} style={mainStyle.viewChart}>
          <View>
            {dataChart && (
              <BarChart
                data={dataChart}
                width={
                  dataChart && dataChart.labels.length > 10
                    ? Dimensions.get('window').width +
                      (dataChart.labels.length / 2) * 100
                    : Dimensions.get('window').width
                }
                withInnerLines={false}
                height={220}
                chartConfig={chartConfig}
                showValuesOnTopOfBars={true}
              />
            )}
          </View>
        </ScrollView>
        <View style={[mainStyle.viewChart, {marginBottom: 30}]}>
          <AppText style={contentStyle.txtTitle}>Chi tiết chấm công</AppText>
          <View style={{paddingLeft: 10, marginBottom: 20}}>
            <View style={{flexDirection: 'row', marginBottom: 5}}>
              {/* start */}
              <View style={{flex: 1, marginRight: 10}}>
                <AppText style={contentStyle.subText}>Từ ngày</AppText>
                <ButtonComponent
                  style={[contentStyle.viewCalendar]}
                  text={Moment(timeFilter.start).format('DD/MM/YYYY')}
                  onPress={() => showDatePicker('start')}
                  iconSource={IMAGES.IcCalendarGray}
                  styleIcon={contentStyle.btnIcon}
                />
                <AppText style={contentStyle.subText}>Lọc từ ngày...</AppText>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <CheckBox
                    disabled={false}
                    value={toggleCheckBox.start}
                    onValueChange={newValue =>
                      setToggleCheckBox({start: newValue})
                    }
                  />
                  <AppText style={{fontSize: 12}}>
                    Chỉ hiện đi trễ, về sớm
                  </AppText>
                </View>
                <DateTimePickerModal
                  isVisible={openTimePicker.start}
                  mode="date"
                  date={timeFilter.start}
                  onConfirm={time => handleConfirm('start', time)}
                  onCancel={() => hideDatePicker('start')}
                />
              </View>

              {/* from */}
              <View style={{flex: 1}}>
                <AppText style={contentStyle.subText}>Đến ngày</AppText>
                <ButtonComponent
                  style={contentStyle.viewCalendar}
                  text={Moment(timeFilter.finish).format('DD/MM/YYYY')}
                  onPress={() => showDatePicker('finish')}
                  iconSource={IMAGES.IcCalendarGray}
                  styleIcon={contentStyle.btnIcon}
                />
                <AppText style={contentStyle.subText}>Lọc đến ngày...</AppText>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <CheckBox
                    disabled={false}
                    value={toggleCheckBox.finish}
                    onValueChange={newValue =>
                      setToggleCheckBox({finish: newValue})
                    }
                  />
                  <AppText style={{fontSize: 12}}>Chỉ hiện đi trễ</AppText>
                </View>
                <DateTimePickerModal
                  isVisible={openTimePicker.finish}
                  mode="date"
                  date={timeFilter.finish}
                  minimumDate={timeFilter.start}
                  onConfirm={time => handleConfirm('finish', time)}
                  onCancel={() => hideDatePicker('finish')}
                />
              </View>
            </View>
            <ButtonComponent
              style={contentStyle.btnFilter}
              text={'Lọc'}
              textStyle={{color: 'white'}}
              onPress={onSubmitFilter}
            />
            <View style={{marginBottom: 20}}>
              <View
                style={{flexDirection: 'row', borderWidth: 0.2, padding: 5}}>
                <AppText style={{flex: 2, fontWeight: '500'}}>Ngày</AppText>
                <AppText style={{flex: 2, fontWeight: '500'}}>Giờ vào</AppText>
                <AppText style={{flex: 2, fontWeight: '500'}}>Giờ ra</AppText>
                <AppText style={{flex: 1, fontWeight: '500'}}>Tổng</AppText>
              </View>
              {table &&
                table.length >= 1 &&
                table.map((item, index) => {
                  return (
                    <View
                      key={index}
                      style={{
                        justifyContent: 'space-between',
                        borderWidth: 0.2,
                        padding: 5,
                      }}>
                      <View style={{flexDirection: 'row'}}>
                        <AppText
                          style={[
                            {flex: 2, fontWeight: '500', color: 'black'},
                            item.isError && styles.errText,
                          ]}>
                          {item.date}
                        </AppText>
                        <AppText
                          style={[{flex: 2}, item.isError && styles.errText]}>
                          {item.time_input}
                        </AppText>
                        <AppText
                          style={[{flex: 2}, item.isError && styles.errText]}>
                          {item.time_output}
                        </AppText>
                        <AppText
                          style={[
                            {flex: 1, fontWeight: '500', color: 'black'},
                            item.isError && styles.errText,
                          ]}>{`${item.total} giờ`}</AppText>
                      </View>
                      <View style={{flexDirection: 'row'}}>
                        <AppText
                          style={[{flex: 1}, item.isError && styles.errText]}>
                          Đi trễ{' '}
                        </AppText>
                        <AppText
                          style={[
                            contentStyle.boldTxt,
                            item.isError && styles.errText,
                          ]}>
                          {item.time_work_late}
                        </AppText>
                      </View>
                      <View style={{flexDirection: 'row'}}>
                        <AppText
                          style={[{flex: 1}, item.isError && styles.errText]}>
                          Về sớm{' '}
                        </AppText>
                        <AppText
                          style={[
                            contentStyle.boldTxt,
                            item.isError && styles.errText,
                          ]}>
                          {item.leave_early}
                        </AppText>
                      </View>
                    </View>
                  );
                })}
            </View>
          </View>
          {/* footer  */}
          {table && (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'flex-end',
                marginBottom: 50,
              }}>
              <AppText
                style={{
                  marginRight: 10,
                }}>{`${infoTable.from}-${infoTable.to} của ${infoTable.total}`}</AppText>
              <ButtonComponent
                style={{marginRight: 10}}
                iconSource={
                  infoTable.total < 10 || payload.page == 1
                    ? IMAGES.IcDoubleArrowLeftGrey
                    : IMAGES.IcDoubleArrowLeft
                }
                onPress={firstPage}
                styleIcon={{width: 20, height: 20}}
                disable={
                  infoTable.total < 10 || payload.page == 1 ? true : false
                }
              />
              <ButtonComponent
                style={{marginRight: 10}}
                iconSource={
                  payload.page == 1 || infoTable.total < 10
                    ? IMAGES.IcArrowLeftGrey
                    : IMAGES.IcArrowLeft
                }
                onPress={prevPage}
                styleIcon={{width: 20, height: 20}}
                disable={
                  payload.page == 1 || infoTable.total < 10 ? true : false
                }
              />
              <ButtonComponent
                style={{marginRight: 10}}
                iconSource={
                  infoTable.isLastPage
                    ? IMAGES.IcArrowRightGrey
                    : IMAGES.IcArrowRight
                }
                onPress={nextPage}
                styleIcon={{width: 20, height: 20}}
                disable={infoTable.isLastPage}
              />
              <ButtonComponent
                style={{marginRight: 10}}
                iconSource={
                  infoTable.isLastPage
                    ? IMAGES.IcDoubleArrowRightGrey
                    : IMAGES.IcDoubleArrowRight
                }
                onPress={lastPage}
                styleIcon={{width: 20, height: 20}}
                disable={infoTable.isLastPage}
              />
            </View>
          )}
        </View>
        {isLoading && <LoadingProgress />}
      </ScrollView>
    </SafeAreaView>
  );
};

export default WorkLoadScreen;