import React, {useEffect, useRef, useState, useMemo, useCallback} from 'react';
import {
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  Image,
  Text,
  View,
  TextInput,
  Modal,
} from 'react-native';
import PieChart from 'react-native-pie-chart';
import styles from './style';
import {IMAGES, GifType} from '../../values/images';
import Moment from 'moment';
import Alert from 'react-native-awesome-alerts';
import ButtonComponent from '../../components/ButtonComponent';
import FastImage from 'react-native-fast-image';
import SelectDropdown from 'react-native-select-dropdown';
const OnLeaveScreen = ({
  userDetails,
  navigateToConfirmDate,
  navigateToOverTime,
  dataChart,
  alertMessage,
  showAlert,
  onHideAlert,
  isDisableLoadMore,
  onLoadMoreLeavesTicket,
  leaveList,
  leaveApproveReqList,
  onRefreshLeaveList,
  onLoadMoreLeavesApproveReqTicket,
  onRefreshLeaveApproveReqList,
  modalContent,
  onOpenDetailModal,
  onOpenAddModal,
  payloadApproveLeaves,
  onChangeSelectFilter,
  minutesToHours,
}) => {
  const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
  //console.log('dataChart', dataChart);
  return (
    <SafeAreaView>
      <ScrollView nestedScrollEnabled={true}>
        <View style={styles.pieChartContainer}>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <View style={{flexDirection: 'row'}}>
              {dataChart &&
                dataChart?.length &&
                dataChart.map((item, index) => {
                  return (
                    <View key={index} style={styles.pieChartView}>
                      <View style={styles.pieItem}>
                        <View style={{marginBottom: 10}}>
                          <Text style={{textAlign: 'center', fontSize: 12}}>
                            {item.name}
                          </Text>
                        </View>
                        <View
                          style={{
                            alignItems: 'center',
                            justifyContent: 'center',
                          }}>
                          <PieChart
                            doughnut={true}
                            widthAndHeight={100}
                            series={[
                              item.from ? item.from : 0,
                              item.to ? item.to : 1,
                            ]}
                            sliceColor={sliceColorRight}
                            coverRadius={0.9}
                          />
                          <View style={styles.pieFill}>
                            <Text
                              style={
                                styles.pieFillTextAmount
                              }>{`${item.from} / ${item.to}`}</Text>
                            <Text style={styles.pieFillText}> Ngày </Text>
                          </View>
                        </View>
                        <View>
                          <View style={[styles.viewTextPie, {marginTop: 20}]}>
                            <View
                              style={[
                                styles.bgLeftViewTextPie,
                                {backgroundColor: '#6dc9ee', marginRight: 5},
                              ]}></View>
                            <Text>Phép đã nghỉ</Text>
                          </View>
                          <View style={[styles.viewTextPie]}>
                            <View
                              style={[
                                styles.bgLeftViewTextPie,
                                {backgroundColor: '#d9f4ff', marginRight: 10},
                              ]}></View>
                            <Text>Phép còn lại</Text>
                          </View>
                        </View>
                      </View>
                    </View>
                  );
                })}
            </View>
          </ScrollView>
        </View>
        <View style={styles.view}>
          <Text style={{fontWeight: '500', marginBottom: 10}}>
            Nghỉ phép của bạn:{' '}
          </Text>
          <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <TouchableOpacity
              style={styles.btnConfirm}
              onPress={onOpenAddModal}>
              <Image source={IMAGES.IcBtnAdd} style={styles.iconPlus} />
              <Text style={styles.whiteTxt}>YÊU CẦU NGHỈ PHÉP</Text>
            </TouchableOpacity>
          </View>
          <Text style={{fontWeight: '500', marginBottom: 10, marginTop: 10}}>
            Liên kết nhanh:{' '}
          </Text>
          <TouchableOpacity
            style={{flexDirection: 'row'}}
            onPress={navigateToConfirmDate}>
            <Image source={IMAGES.IcTask} style={styles.iconPlus} />
            <Text style={styles.primary_blue}>Xác nhận ngày công</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={navigateToOverTime}
            style={{flexDirection: 'row', marginTop: 5}}>
            <Image source={IMAGES.IcBackTime} style={styles.iconPlus} />
            <Text style={styles.primary_blue}>Tăng ca của tôi</Text>
          </TouchableOpacity>
        </View>
        {/* Approve leave request */}
        {leaveApproveReqList && (
          <View style={styles.view}>
            <View style={{flexDirection: 'row', marginBottom: 10}}>
              <Text
                style={{
                  fontWeight: 'bold',
                  marginBottom: 10,
                  fontSize: 16,
                  flex: 2,
                  textAlign: 'left',
                  flex: 2,
                }}>
                Duyệt yêu cầu nghỉ phép{' '}
              </Text>
              <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={payloadApproveLeaves?.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>
            {leaveApproveReqList?.length > 0 &&
              leaveApproveReqList[0].approver_id == userDetails.id &&
              leaveApproveReqList.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  style={[
                    styles.item,
                    {
                      borderLeftColor: item.extend_approved_status_color,
                    },
                  ]}
                  onPress={() => onOpenDetailModal(item)}>
                  <View style={{flexDirection: 'row', flex: 2}}>
                    <Image
                      source={{
                        uri:
                          'https://meu.anawork.com' +
                          item.extend_creator_avatar,
                      }}
                      style={{
                        width: 30,
                        height: 30,
                        alignSelf: 'center',
                        marginRight: 10,
                      }}
                    />
                    <View>
                      <View>
                        <Text style={styles.title}>
                          {item.extend_creator_full_name}
                        </Text>
                        <Text>{Moment(item.start).format('DD/MM/YYYY')}</Text>
                      </View>
                    </View>
                  </View>
                  <View style={{flex: 1}}>
                    <View style={{flex: 1, alignItems: 'flex-end'}}>
                      <Text numberOfLines={1} style={{flex: 1}}>
                        {item.extend_category_name}
                      </Text>
                      <Text>{`${item.extend_taken_days} ngày`}</Text>
                    </View>
                  </View>
                </TouchableOpacity>
              ))}
            {leaveList?.length > 0 && !isDisableLoadMore.approveReqBtn && (
              <ButtonComponent
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  padding: 10,
                }}
                text={'Xem thêm'}
                textStyle={{color: '#5d78ff'}}
                onPress={onLoadMoreLeavesApproveReqTicket}
              />
            )}
          </View>
        )}
        {/* My leave request */}
        <View style={[styles.view, {marginBottom: 30}]}>
          <View style={{flexDirection: 'row', marginBottom: 10}}>
            <Text
              style={{
                fontWeight: 'bold',

                flex: 1,
                fontSize: 17,
                alignSelf: 'center',
              }}>
              Nghỉ phép của tôi:{' '}
            </Text>
            <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={onRefreshLeaveList}
                leftIcon={IMAGES.IcRefresh}
                styleIcon={{width: 20, height: 20}}
              />
            </View>
          </View>
          {leaveList.length === 0 && (
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: 'white',
                marginTop: 10,
                padding: 20,
              }}>
              <Text style={{textAlign: 'center'}}>
                Bạn chưa có ngày nghỉ nào! Vui lòng chọn “yêu cầu nghỉ phép” ở
                bên trên nhé!
              </Text>
              <FastImage
                source={GifType.gifLeave}
                style={{width: '90%', height: 250}}
              />
            </View>
          )}
          {leaveList &&
            leaveList.map((item, index) => (
              <TouchableOpacity
                onPress={() => onOpenDetailModal(item)}
                key={index}>
                <View
                  style={[
                    styles.item,
                    {borderLeftColor: item.extend_approved_status_color},
                  ]}>
                  <View style={{flex: 2}}>
                    <Text style={styles.title}>
                      {item.extend_category_name}
                    </Text>
                    <Text>{Moment(item.start).format('DD/MM/YYYY')}</Text>
                  </View>
                  <View style={{flex: 1, alignItems: 'flex-end'}}>
                    <Text numberOfLines={1}>{item.reason}</Text>
                    <Text>{`${item.extend_taken_days} ngày`}</Text>
                  </View>
                </View>
              </TouchableOpacity>
            ))}
          {leaveList && leaveList.length > 0 && !isDisableLoadMore.leaveBtn && (
            <ButtonComponent
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                padding: 10,
              }}
              text={'Xem thêm'}
              textStyle={{color: '#5d78ff'}}
              onPress={onLoadMoreLeavesTicket}
            />
          )}
        </View>
        {modalContent}
        {/* Modal detail leave request */}
        <Alert
          show={showAlert.isError}
          showProgress={false}
          title={showAlert.title}
          message={showAlert.message}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showConfirmButton={true}
          confirmText="Đóng"
          confirmButtonColor="#DD6B55"
          onConfirmPressed={onHideAlert}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

export default OnLeaveScreen;
