/* eslint-disable prettier/prettier */
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import {
  Image,
  SafeAreaView,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../../../components/AppText';
import ButtonComponent from '../../../../components/ButtonComponent';
import { IconTimeSheet, IMAGES } from '../../../../values/images';
import ConfirmedShiftDetailContainer from './ConfirmedShiftDetail/ConfirmedShiftDetailContainer';
import { mainStyle } from './style';
const statusDropdownData = [
  'Tất cả trạng thái',
  'Chờ duyệt',
  'Duyệt',
  'Từ chối',
  'Nháp',
  'Chưa nhập Timesheet',
];

const ConfirmedShiftScreen = ({
  numberWeekOfYear,
  myApprovalRequestList,
  managerDate,
  currentPage,
  totalPage,
  setSearchValue,
  prevWeek,
  nextWeek,
  onPageNext,
  onPagePrevious,
}) => {
  const typingTimeoutRef = useRef(null);
  const [isDesOpen, setOpenDes] = useState(false);

  //Table list
  const [myApprovalRequestFinalList, setMyApprovalRequestFinalList] = useState(
    [],
  );
  const [userId, setUserId] = useState();
  const handleSearchDebounce = text => {
    const value = text;

    if (typingTimeoutRef.current) {
      clearTimeout(typingTimeoutRef.current);
    }

    typingTimeoutRef.current = setTimeout(() => {
      setSearchValue(value);
    }, 300);
  };

  const handleList = () => {
    if (myApprovalRequestList.length > 0) {
      const clone = [...myApprovalRequestList];
      for (let i = 0; i < clone.length; i++) {
        clone[i].isExpand = false;

        if (clone[i].week == null) {
          clone[i].user.extend_total_hour = 0;
          clone[i].user.status = 'Chưa nhập Timesheet';
          clone[i].user.extend_status_color = null;
        } else {
          clone[i].user.extend_total_hour =
            myApprovalRequestList[i].week.extend_total_hour;
          clone[i].user.status =
            myApprovalRequestList[i].week.extend_status_name;
          clone[i].user.extend_status_color =
            myApprovalRequestList[i].week.extend_status_color;
        }
      }
      setMyApprovalRequestFinalList(clone);
    }
  };

  const onExpandRow = id => {
    const clone = [...myApprovalRequestFinalList];
    let index = clone.findIndex(el => el?.user?.id === id);
    let element = clone.find(el => el?.user?.id === id);
    clone.splice(index, 1, {
      ...element,
      isExpand: true,
    });
    setMyApprovalRequestFinalList(clone);
  };

  const onCloseExpandRow = id => {
    const clone = [...myApprovalRequestFinalList];
    let index = clone.findIndex(el => el?.user?.id === id);
    let element = clone.find(el => el?.user?.id === id);
    clone.splice(index, 1, {
      ...element,
      isExpand: false,
    });
    setMyApprovalRequestFinalList(clone);
  };

  const onStatusChange = item => {
    if (item === 'Tất cả trạng thái') {
      handleList();
    } else {
      const clone = [...myApprovalRequestList];
      const newClone = clone.filter(el => el?.user.status === item);
      //console.log(newClone);
      setMyApprovalRequestFinalList(newClone);
    }
  };

  useEffect(() => {
    handleList();
  }, [myApprovalRequestList]);

  return (
    <SafeAreaView>
      <View style={mainStyle.bodyContainer}>
        {isDesOpen ? (
          <ConfirmedShiftDetailContainer
            userId={userId}
            numberOfWeek={numberWeekOfYear}
            year={moment(managerDate?.currentDate).year()}
            prevWeek={prevWeek}
            nextWeek={nextWeek}
            monday={managerDate?.currentDate}
            sunday={managerDate?.theWeekend}
          />
        ) : (
          <View>
            {/* Search  */}
            <View>
              <Image source={IMAGES.IcSearchPNG} style={mainStyle.searchIcon} />
              <TextInput
                style={mainStyle.searchInput}
                placeholder="Nhập tìm kiếm"
                onChangeText={text => handleSearchDebounce(text)}
              />
            </View>
            {/* Week  */}
            <View style={[mainStyle.row, {justifyContent: 'space-between'}]}>
              <ButtonComponent
                style={{
                  backgroundColor: '#e9eaf9',
                  padding: 5,
                }}
                iconSource={IconTimeSheet.IcLeftForward}
                styleIcon={{height: 20, width: 20}}
                onPress={prevWeek}
              />
              <View
                style={{
                  flexDirection: 'row',
                  backgroundColor: '#e9eaf9',
                  justifyContent: 'center',
                  alignItems: 'center',
                  paddingLeft: 10,
                  paddingRight: 10,
                }}>
                <AppText style={{color: '#615f71', fontWeight: '500'}}>
                  {`Tuần ${numberWeekOfYear} `}{' '}
                </AppText>
                <AppText>{`${moment(managerDate?.currentDate).format(
                  'DD/MM/YYYY',
                )} - ${moment(managerDate?.theWeekend).format(
                  'DD/MM/YYYY',
                )}`}</AppText>
                <Image
                  source={IMAGES.IcCalendarGray}
                  style={{height: 20, width: 20, marginLeft: 10}}
                />
              </View>
              <ButtonComponent
                style={{
                  backgroundColor: '#e9eaf9',
                  padding: 5,
                }}
                iconSource={IconTimeSheet.IcRightForward}
                styleIcon={{height: 20, width: 20}}
                onPress={nextWeek}
              />
            </View>
            {/* Table header */}
            <View>
              <View style={{...mainStyle.rowSpaceBetween, marginTop: 16}}>
                <AppText style={mainStyle.textTitle}>
                  Danh sách nhân viên
                </AppText>
                <SelectDropdown
                  data={statusDropdownData}
                  buttonStyle={mainStyle.statusButtonDropdown}
                  buttonTextStyle={mainStyle.statusButtonTextDropdown}
                  defaultValue={statusDropdownData[0]}
                  onSelect={selectedItem => onStatusChange(selectedItem)}
                />
              </View>
              <View style={mainStyle.tableContainer}>
                <View style={mainStyle.tableHeader}>
                  <View
                    style={{
                      ...mainStyle.tableHeaderContainer,
                      width: '20%',
                      paddingLeft: 12,
                    }}>
                    <AppText style={mainStyle.tableHeaderTitle}>#</AppText>
                  </View>
                  <View
                    style={{...mainStyle.tableHeaderContainer, width: '35%'}}>
                    <AppText style={mainStyle.tableHeaderTitle}>
                      Nhân viên
                    </AppText>
                  </View>
                  <View
                    style={{...mainStyle.tableHeaderContainer, width: '35%'}}>
                    <AppText style={mainStyle.tableHeaderTitle}>
                      Trạng thái timesheet
                    </AppText>
                  </View>
                  <View
                    style={{
                      ...mainStyle.tableHeaderContainer,
                      width: '10%',
                    }}></View>
                </View>
                <View style={mainStyle.tableBody}>
                  {/* Row */}
                  {myApprovalRequestFinalList.length > 0 ? (
                    myApprovalRequestFinalList.map((el, index) => (
                      <View key={index}>
                        <View style={mainStyle.tableRowContent}>
                          <View style={{width: '20%', paddingLeft: 12}}>
                            <AppText
                              style={{fontWeight: 'bold', color: '#313131'}}>
                              {index + 1}
                            </AppText>
                          </View>
                          <View style={{width: '35%'}}>
                            <AppText
                              style={{fontWeight: 'bold', color: '#313131'}}>
                              {el?.user?.extend_user_full_name || '--'}
                            </AppText>
                          </View>
                          <View
                            style={{
                              width: '35%',
                              flexDirection: 'row',
                              alignItems: 'center',
                            }}>
                            <View
                              style={{
                                ...mainStyle.dotStatus,
                                backgroundColor: el?.user?.extend_status_color
                                  ? '#34bfa3'
                                  : '#757575',
                                marginRight: 8,
                              }}></View>
                            <AppText
                              style={{fontWeight: 'bold', color: '#313131'}}>
                              {el?.user?.status}
                            </AppText>
                          </View>
                          <View style={{width: '10%'}}>
                            {el?.isExpand ? (
                              <TouchableOpacity
                                onPress={() => onCloseExpandRow(el?.user?.id)}>
                                <Image
                                  source={IMAGES.IcArrowDown}
                                  style={{width: 25, height: 25}}
                                />
                              </TouchableOpacity>
                            ) : (
                              <TouchableOpacity
                                onPress={() => onExpandRow(el?.user?.id)}>
                                <Image
                                  source={IMAGES.IcArrowRight}
                                  style={{width: 25, height: 25}}
                                />
                              </TouchableOpacity>
                            )}
                          </View>
                        </View>
                        {el?.isExpand && (
                          <View>
                            <View style={mainStyle.tableRowContent}>
                              <View
                                style={{width: '20%', paddingLeft: 12}}></View>
                              <View style={{width: '35%'}}>
                                <AppText>Mã nhân viên</AppText>
                              </View>
                              <View style={{width: '35%'}}>
                                <AppText
                                  style={{
                                    fontWeight: 'bold',
                                    color: '#313131',
                                  }}>
                                  {el?.user?.employee_code || '--'}
                                </AppText>
                              </View>
                              <View style={{width: '10%'}}></View>
                            </View>
                            <View style={mainStyle.tableRowContent}>
                              <View
                                style={{width: '20%', paddingLeft: 12}}></View>
                              <View style={{width: '35%'}}>
                                <AppText>Phòng ban</AppText>
                              </View>
                              <View style={{width: '35%'}}>
                                <AppText
                                  style={{
                                    fontWeight: 'bold',
                                    color: '#313131',
                                  }}>
                                  {el?.user?.department || '--'}
                                </AppText>
                              </View>
                              <View style={{width: '10%'}}></View>
                            </View>
                            <View style={mainStyle.tableRowContent}>
                              <View
                                style={{width: '20%', paddingLeft: 12}}></View>
                              <View style={{width: '35%'}}>
                                <AppText>Chức vụ</AppText>
                              </View>
                              <View style={{width: '35%'}}>
                                <AppText
                                  style={{
                                    fontWeight: 'bold',
                                    color: '#313131',
                                  }}>
                                  {el?.user?.position || '--'}
                                </AppText>
                              </View>
                              <View style={{width: '10%'}}></View>
                            </View>
                            <View style={mainStyle.tableRowContent}>
                              <View
                                style={{width: '20%', paddingLeft: 12}}></View>
                              <View style={{width: '35%'}}>
                                <AppText>Số giờ</AppText>
                              </View>
                              <View style={{width: '35%'}}>
                                <AppText
                                  style={{
                                    fontWeight: 'bold',
                                    color: '#313131',
                                  }}>
                                  {el?.user?.extend_total_hour}
                                </AppText>
                              </View>
                              <View style={{width: '10%'}}></View>
                            </View>
                            <View
                              style={{
                                flexDirection: 'row',
                                justifyContent: 'center',
                                marginBottom: 16,
                                marginTop: 8,
                              }}>
                              <ButtonComponent
                                style={mainStyle.tableButtonView}
                                textStyle={mainStyle.tableButtonTextView}
                                onPress={
                                  () => {
                                    setUserId(el?.user?.id);
                                    setOpenDes(true);
                                  }
                                  // RootNavigation.navigate(
                                  //   APP_NAVIGATE_SCREEN.CONFIRM_SHIFT_DETAIL,
                                  //   {
                                  //     sheetId: el?.user?.id,
                                  //     numberOfWeek: numberWeekOfYear,
                                  //     year: moment(managerDate?.currentDate).year(),
                                  //   },
                                  // )
                                }
                                text="Xem chi tiết"
                              />
                            </View>
                          </View>
                        )}
                      </View>
                    ))
                  ) : (
                    <View style={{marginTop: 8, marginBottom: 8}}>
                      <AppText style={{textAlign: 'center'}}>
                        Không có dữ liệu
                      </AppText>
                    </View>
                  )}
                </View>
              </View>
            </View>
            {myApprovalRequestFinalList.length > 0 && (
              <View style={mainStyle.paginationContainer}>
                <View style={mainStyle.pagination}>
                  <TouchableOpacity
                    onPress={() => onPagePrevious()}
                    disabled={currentPage === 1}>
                    <Image
                      source={IMAGES.IcArrowRight}
                      style={{
                        width: 25,
                        height: 25,
                        transform: [{rotate: '-180deg'}],
                      }}
                    />
                  </TouchableOpacity>
                  <AppText>{`Trang ${currentPage}/${totalPage}`}</AppText>
                  <TouchableOpacity
                    onPress={() => onPageNext()}
                    disabled={currentPage === totalPage}>
                    <Image
                      source={IMAGES.IcArrowRight}
                      style={{width: 25, height: 25}}
                    />
                  </TouchableOpacity>
                </View>
              </View>
            )}
          </View>
        )}
      </View>
    </SafeAreaView>
  );
};

export default ConfirmedShiftScreen;