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';
import StatisticsConfirmWorkdays from './components/StatisticsConfirmWorkdays';
import commonStyles from '../../../styles/commonStyles';

const ConfirmDateMainView = ({
  isDisableLoadMore,
  showAlert,
  onHideAlert,
  navigateToDayWage,
  onLoadMoreRequestApprove,
  onLoadMoreConfirmList,
  requestApproveArr,
  confirmList,
  onRefreshConfirmList,
  modalContent,
  onOpenDetailModal,
  onOpenRequestLeavesModal,
  approveReqPayload,
  onChangeSelectFilter,
  minutesToHours,
  dataChart,
  onChangeMonthFilter,
  dayPress,
}) => {
  return (
    <SafeAreaView>
      <ScrollView nestedScrollEnabled={true}>
        <StatisticsConfirmWorkdays
          dataChart={dataChart}
          onChangeMonthFilter={onChangeMonthFilter}
          dayPress={dayPress}
        />
        <View style={[styles.view, commonStyles.baseShadow]}>
          <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={onOpenRequestLeavesModal}
              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 ConfirmDateMainView;
