/* eslint-disable prettier/prettier */
import Moment from 'moment';
import React from 'react';
import {
  Image,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import Alert from 'react-native-awesome-alerts';
import ButtonComponent from '../../components/ButtonComponent';
import {GifType, IMAGES} from '../../values/images';
import styles from './style';

import FastImage from 'react-native-fast-image';
import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../components/AppText';

const ConfirmDateScreen = ({
  dataChart,
  isDisableLoadMore,
  userDetails,
  showAlert,
  onHideAlert,
  navigateToDayWage,
  alertMessage,
  onLoadMoreRequestApprove,
  onLoadMoreConfirmList,
  requestApproveArr,
  confirmList,
  monthChart,
  onRefreshConfirmList,
  modalContent,
  onOpenDetailModal,
  onOpenAddModal,
  approveReqPayload,
  onChangeSelectFilter,
  onChangeMonthFilter,
  dayPress,
  onChangeDayPressInChart,
  minutesToHours,
}) => {
  const typeChartColor = [
    {color: '#7d93ff', name: 'Trên 6h'},
    {color: '#9eaeff', name: '4-6h'},
    {color: '#bec9ff', name: '2-4h'},
    {color: '#dfe4ff', name: '0-2h'},
    {color: '#f2f2f2', name: '0h'},
  ];

  //console.log(dataChart?.data);
  const dayOfWeek = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday',
  ];

  return (
    <SafeAreaView>
      <ScrollView nestedScrollEnabled={true}>
        <View style={{padding: 15, backgroundColor: 'white'}}>
          <AppText style={[styles.title, {marginBottom: 20}]}>
            Thống kê xác nhận ngày công của tôi{' '}
          </AppText>
          <SelectDropdown
            data={[
              'Tháng 01',
              'Tháng 02',
              'Tháng 03',
              'Tháng 04',
              'Tháng 05',
              'Tháng 06',
              'Tháng 07',
              'Tháng 08',
              'Tháng 09',
              'Tháng 10',
              'Tháng 11',
              'Tháng 12',
            ]}
            dropdownIconPosition={'right'}
            defaultButtonText={'Tháng ' + (new Date().getMonth() + 1)}
            buttonStyle={styles.dropdown1BtnStyle}
            onSelect={selectedItem => onChangeMonthFilter(selectedItem)}
            dropdownStyle={styles.dropdown1DropdownStyle}
            rowStyle={styles.dropdown1RowStyle}
            rowTextStyle={styles.dropdown1RowTxtStyle}
            buttonTextStyle={styles.dropdown1BtnTxtStyle}
            renderDropdownIcon={isOpened => {
              return (
                <Image
                  source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown}
                  style={{width: 20, height: 20}}
                />
              );
            }}
          />
          {/* <View style={{flexDirection: 'row', marginTop: 20}}>
            <View style={{flex: 3}}>
              <View style={{}}>
                <View
                  style={{
                    flexDirection: 'row',
                    width: windowWidth / 2,
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginBottom: -30,
                    paddingLeft: 10,
                    paddingRight: 15,
                    zIndex: 100,
                    borderBottomWidth: 1,
                    borderBottomColor: '#5d78ff',
                    paddingBottom: 5,
                  }}>
                  <AppText style={{fontSize: 10}}>T2</AppText>
                  <AppText style={{fontSize: 10}}>T3</AppText>
                  <AppText style={{fontSize: 10}}>T4</AppText>
                  <AppText style={{fontSize: 10}}>T5</AppText>
                  <AppText style={{fontSize: 10}}>T6</AppText>
                  <AppText style={{fontSize: 10}}>T7</AppText>
                  <AppText style={{fontSize: 10}}>CN</AppText>
                </View>
                {dataChart && dataChart?.data?.length > 0 && (
                  <ContributionGraph
                    style={{
                      borderWidth: 1,
                      borderColor: '#5d78ff',
                      borderRadius: 10,
                      width: windowWidth / 2,
                      justifyContent: 'center',
                      alignItems: 'center',
                      paddingBottom: 10,
                    }}
                    values={dataChart.data}
                    accessor={'absent_hours'}
                    endDate={Moment(
                      `${new Date().getFullYear()}-${dataChart.month}-01`,
                    )
                      .add(1, 'month')
                      .format('YYYY-MM-DD')}
                    numDays={40}
                    horizontal={true}
                    gutterSize={5}
                    width={windowWidth / 2}
                    height={windowHeight / 4}
                    chartConfig={chartConfig}
                    showOutOfRangeDays={true}
                    showMonthLabels={false}
                    onDayPress={date =>
                      onChangeDayPressInChart(
                        Moment(date.date).format('DD-MM-YYYY'),
                      )
                    }
                  />
                )}
              </View>
            </View>
            <View style={{justifyContent: 'center', flex: 1}}>
              {typeChartColor &&
                typeChartColor.map((item, i) => (
                  <View key={i} style={{flexDirection: 'row'}}>
                    <View
                      style={{
                        width: 20,
                        height: 20,
                        marginRight: 10,
                        marginBottom: 2,
                        backgroundColor: item.color,
                      }}
                    />
                    <AppText style={{fontSize: 11}}>{item.name}</AppText>
                  </View>
                ))}
              <View style={{marginTop: 10}}>
                {dayPress && <AppText>{dayPress}</AppText>}
              </View>
            </View>
          </View> */}
          <View style={{flexDirection: 'row', marginTop: 20}}>
            <View style={styles.viewCalendar}>
              <View style={styles.viewDayOfWeek}>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T2</AppText>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T3</AppText>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T4</AppText>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T5</AppText>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T6</AppText>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>T7</AppText>
                <AppText style={{fontSize: 12, fontWeight: 'bold'}}>CN</AppText>
              </View>
              {dataChart?.data.length > 0 &&
                dataChart?.data?.map((item, index) => {
                  let flag = false;
                  return (
                    <View key={index}>
                      {(index == 0 && (
                        <View
                          style={{
                            flexDirection: 'row',
                          }}>
                          {dayOfWeek.map((el, i) => {
                            if (flag) return true;
                            if (Moment(item.date).format('dddd') === el) {
                              flag = true;
                              return (
                                <View
                                  key={i}
                                  style={{
                                    width: 30,
                                    height: 30,
                                    backgroundColor:
                                      (parseInt(item.absent_hours) > 6 &&
                                        '#7d93ff') ||
                                      (parseInt(item.absent_hours) >= 4 &&
                                        parseInt(item.absent_hours) <= 6 &&
                                        '#7d93ff') ||
                                      (parseInt(item.absent_hours) >= 2 &&
                                        parseInt(item.absent_hours) <= 4 &&
                                        '#7d93ff') ||
                                      (parseInt(item.absent_hours) > 0 &&
                                        parseInt(item.absent_hours) <= 2 &&
                                        '#dfe4ff') ||
                                      '#f2f2f2',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    margin: 2,
                                  }}>
                                  {
                                    <AppText>{`${new Date(
                                      item.date,
                                    ).getDate()}`}</AppText>
                                  }
                                </View>
                              );
                            } else {
                              return (
                                <View
                                  key={i}
                                  style={{
                                    width: 30,
                                    height: 30,
                                    backgroundColor: '#f2f2f2',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    margin: 2,
                                  }}></View>
                              );
                            }
                          })}
                        </View>
                      )) || (
                        <View
                          style={{
                            width: 30,
                            height: 30,
                            backgroundColor:
                              (parseInt(item.absent_hours) > 6 && '#7d93ff') ||
                              (parseInt(item.absent_hours) >= 4 &&
                                parseInt(item.absent_hours) <= 6 &&
                                '#7d93ff') ||
                              (parseInt(item.absent_hours) >= 2 &&
                                parseInt(item.absent_hours) <= 4 &&
                                '#7d93ff') ||
                              (parseInt(item.absent_hours) > 0 &&
                                parseInt(item.absent_hours) <= 2 &&
                                '#dfe4ff') ||
                              '#f2f2f2',
                            justifyContent: 'center',
                            alignItems: 'center',
                            margin: 2,
                          }}>
                          {
                            <AppText>{`${new Date(
                              item.date,
                            ).getDate()}`}</AppText>
                          }
                        </View>
                      )}
                    </View>
                  );
                })}
              {/* {dataChart.month && (
                <Calendar
                  current={Moment(
                    `${new Date().getFullYear()}-${dataChart.month}-01`,
                  ).format('YYYY-MM-DD')}
                  context={{date: ''}}
                  markedDates={dataChart.data}
                  markingType="dot"
                  // onDayPress={day => {
                  //   handleOpenDesBirthday(day);
                  // }}
                  enableSwipeMonths={false}
                  hideArrows={true}
                  hideExtraDays={true}
                  theme={{
                    // 'stylesheet.calendar.header': {
                    //   header: {
                    //     height: 0,
                    //     opacity: 0,
                    //   },
                    // },
                    'stylesheet.calendar.main': {
                      dayContainer: {
                        padding: -10,
                      },
                    },
                    //day section
                    textDayFontSize: 13,
                    textDayFontFamily:
                      Platform.OS === 'ios' ? 'System' : 'OpenSans',
                    todayTextColor: colors.green,
                    dayTextColor: colors.black,
                    textDisabledColor: 'rgba(0, 0, 0, 0.25)',
                    textDayFontWeight: '600',
                    //month section
                    textMonthFontSize: 18,
                    textMonthFontFamily:
                      Platform.OS === 'ios' ? 'System' : 'Montserrat',
                    monthTextColor: colors.black,
                    textMonthFontWeight: 'bold',
                    //header section
                    textDayHeaderFontSize: 16,
                    textDayHeaderFontFamily:
                      Platform.OS === 'ios' ? 'System' : 'OpenSans',
                    textSectionTitleColor: 'rgba(0, 0, 0, 0.25)',
                    textDayHeaderFontWeight: '300',
                    //selected day section
                    //selectedDayBackgroundColor: colors.primary_blue,
                    selectedDayTextColor: colors.black,
                    //arrow section
                    arrowColor: '#fa0000',

                    //dot section
                    selectedDotColor: colors.primary_blue,
                  }}
                />
              )} */}
            </View>
            <View style={{marginLeft: 30}}>
              {typeChartColor &&
                typeChartColor.map((item, i) => (
                  <View key={i} style={{flexDirection: 'row'}}>
                    <View
                      style={{
                        width: 20,
                        height: 20,
                        marginRight: 10,
                        marginBottom: 2,
                        backgroundColor: item.color,
                      }}
                    />
                    <AppText style={{fontSize: 11}}>{item.name}</AppText>
                  </View>
                ))}
              <View style={{marginTop: 10}}>
                {dayPress && <AppText>{dayPress}</AppText>}
              </View>
            </View>
          </View>
        </View>
        <View style={styles.view}>
          <AppText style={{fontWeight: '500', marginBottom: 10}}>
            Xác nhận ngày công của bạn:{' '}
          </AppText>
          <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <ButtonComponent
              style={styles.btnConfirm}
              onPress={onOpenAddModal}
              leftIcon={IMAGES.IcBtnAdd}
              styleIcon={styles.iconPlus}
              text={'XÁC NHẬN NGÀY CÔNG'}
              textStyle={styles.whiteTxt}
            />
          </View>
          <AppText style={{fontWeight: '500', marginBottom: 10, marginTop: 10}}>
            Liên kết nhanh:{' '}
          </AppText>
          <TouchableOpacity
            style={{flexDirection: 'row'}}
            onPress={navigateToDayWage}>
            <Image source={IMAGES.IcTask} style={styles.iconPlus} />
            <AppText style={styles.primary_blue}>
              Bảng chấm công của tôi
            </AppText>
          </TouchableOpacity>
        </View>
        {requestApproveArr && (
          <View style={[styles.view]}>
            {requestApproveArr && (
              <View
                style={{
                  flexDirection: 'row',
                }}>
                <AppText
                  style={{
                    fontWeight: 'bold',
                    marginBottom: 4,
                    fontSize: 17,
                    flex: 1,
                    alignSelf: 'center',
                  }}>
                  Duyệt ngày công{' '}
                </AppText>

                <View
                  style={{
                    alignItems: 'flex-end',
                    flex: 1,
                    paddingRight: 20,
                  }}>
                  <SelectDropdown
                    data={['Tất cả', 'Chưa duyệt', 'Đã duyệt', 'Đã từ chối']}
                    dropdownIconPosition={'right'}
                    defaultButtonText={approveReqPayload?.type}
                    buttonStyle={styles.dropdown1BtnStyle}
                    onSelect={selectedItem =>
                      onChangeSelectFilter(selectedItem)
                    }
                    dropdownStyle={styles.dropdown1DropdownStyle}
                    rowStyle={styles.dropdown1RowStyle}
                    rowTextStyle={styles.dropdown1RowTxtStyle}
                    buttonTextStyle={styles.dropdown1BtnTxtStyle}
                    renderDropdownIcon={isOpened => {
                      return (
                        <Image
                          source={
                            isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown
                          }
                          style={{width: 20, height: 20}}
                        />
                      );
                    }}
                  />
                </View>
              </View>
            )}

            {requestApproveArr?.length > 0 &&
              // requestApproveArr[0]?.approver_id == userDetails.id &&
              requestApproveArr.map((item, index) => (
                <TouchableOpacity
                  onPress={() => onOpenDetailModal(item)}
                  key={index}
                  style={[
                    styles.item,
                    {
                      borderLeftColor: item.extend_approved_status_color,
                    },
                  ]}>
                  <View style={{flexDirection: 'row', flex: 2}}>
                    <Image
                      source={{
                        uri:
                          'https://meu.anawork.com' +
                          item.extend_creator_avatar,
                      }}
                      style={{width: 35, height: 35, marginRight: 5}}
                    />

                    <View>
                      <AppText style={styles.title}>
                        {item.extend_creator_full_name}
                      </AppText>
                      <AppText>
                        {Moment(item.start).format('DD/MM/YYYY')}
                      </AppText>
                    </View>
                  </View>
                  <View
                    style={{
                      flex: 1,
                      justifyContent: 'flex-end',
                      alignItems: 'flex-end',
                      marginLeft: 10,
                    }}>
                    <AppText>
                      {item.reason.length > 20
                        ? item.reason.slice(0, 15) + '...'
                        : item.reason}
                    </AppText>
                    <AppText>{minutesToHours(item.start, item.finish)}</AppText>
                  </View>
                </TouchableOpacity>
              ))}
            {!isDisableLoadMore.approveRequestBtn &&
              requestApproveArr?.length > 0 && (
                <ButtonComponent
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    padding: 10,
                  }}
                  text={'Xem thêm'}
                  textStyle={{color: '#5d78ff'}}
                  onPress={onLoadMoreRequestApprove}
                />
              )}
          </View>
        )}
        <View style={[styles.view, {marginBottom: 30}]}>
          <View
            style={{
              flexDirection: 'row',
            }}>
            <AppText
              style={{
                fontWeight: 'bold',
                marginBottom: 4,
                fontSize: 17,
                alignSelf: 'center',
                flex: 2,
              }}>
              Xác nhận ngày công của tôi{' '}
            </AppText>
            <View style={{alignItems: 'flex-end', flex: 1, paddingRight: 20}}>
              <ButtonComponent
                text={'Tải lại'}
                textStyle={{color: '#5d78ff'}}
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  padding: 10,
                  flexDirection: 'row',
                }}
                onPress={onRefreshConfirmList}
                leftIcon={IMAGES.IcRefresh}
                styleIcon={{width: 20, height: 20}}
              />
            </View>
          </View>
          {confirmList.length === 0 && (
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: 'white',
                marginTop: 10,
                padding: 20,
              }}>
              <AppText style={{textAlign: 'center'}}>
                Chưa có ngày công nào 😢 Bạn vui lòng thêm ngày công ở ngay bên
                trên nhé!
              </AppText>
              <FastImage
                source={GifType.gifConfirm}
                style={{width: '90%', height: 250}}
              />
            </View>
          )}
          {confirmList &&
            confirmList.map((item, index) => (
              <TouchableOpacity
                onPress={() => onOpenDetailModal(item)}
                key={index}
                style={[
                  styles.item,
                  {
                    borderLeftColor: item.extend_approved_status_color,
                  },
                ]}>
                <View>
                  <AppText style={styles.title}>
                    {item.extend_creator_full_name}
                  </AppText>
                  <AppText>{Moment(item.start).format('DD/MM/YYYY')}</AppText>
                </View>
                <View
                  style={{
                    flex: 1,
                    justifyContent: 'flex-end',
                    alignItems: 'flex-end',
                    marginLeft: 10,
                  }}>
                  <AppText>
                    {item.reason.length > 20
                      ? item.reason.slice(0, 15) + '...'
                      : item.reason}
                  </AppText>
                  <AppText>{minutesToHours(item.start, item.finish)}</AppText>
                </View>
              </TouchableOpacity>
            ))}
          {confirmList.length > 0 && !isDisableLoadMore.confirmBtn && (
            <ButtonComponent
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                padding: 10,
              }}
              text={'Xem thêm'}
              textStyle={{color: '#5d78ff'}}
              onPress={onLoadMoreConfirmList}
            />
          )}
        </View>
        <Alert
          show={showAlert.isError}
          showProgress={false}
          title={showAlert.title}
          message={showAlert.message}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showConfirmButton={true}
          confirmText="Đóng"
          confirmButtonColor="#DD6B55"
          onConfirmPressed={onHideAlert}
        />
        {modalContent}
      </ScrollView>
    </SafeAreaView>
  );
};

export default ConfirmDateScreen;
