import React, {useEffect, useRef, useState, useMemo, useCallback} from 'react';
import {
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  Image,
  Text,
  View,
  TextInput,
  Modal,
  Dimensions,
  StyleSheet,
} from 'react-native';
import {IMAGES} from '../../../values/images';
import SelectDropdown from 'react-native-select-dropdown';
import Moment from 'moment';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import {launchImageLibrary} from 'react-native-image-picker';
import CheckBox from '@react-native-community/checkbox';
import {
  getRangeTimeStart,
  getRangeTimeFinish,
  postUserLeave,
} from '../../../store/actions/UserAction';
import colors from '../../../values/colors';
import ButtonComponent from '../../../components/ButtonComponent';
import {useDispatch, useSelector} from 'react-redux';
import Alert from 'react-native-awesome-alerts';
import Toast from 'react-native-toast-message';
const OnLeaveModalAddNew = ({userDetails, onClose}) => {
  const dispatch = useDispatch();
  const userDirectManagersList = useSelector(
    state => state.MyDirectManagers.myDirectManagers,
  );
  const idLeavesCategory = useSelector(
    state => state.UserLeavesPending.leaveCategories,
  );

  // init state
  const initStateLeave = {
    id: '',
    since: new Date(),
    timeStart: '8:30',
    dateStart: '',
    toDate: new Date(),
    timeFinish: '17:30',
    dateFinish: '',
    reason: '',
    taken_hours: 0,
    approved_date: new Date(),
    approver_id: '',
  };
  // state
  const [leave, setLeave] = useState(initStateLeave);
  const [userManagerList, setUserManagerList] = useState([]);
  const [rangeTimeStart, setRangeTimeStart] = useState([]);
  const [rangeTimeFinish, setRangeTimeFinish] = useState([]);
  const [durationLeave, setDurationLeave] = useState({
    time: 0,
    stringTime: '',
  });
  const [openTimePicker, setOpenTimePicker] = useState({
    start: false,
    finish: false,
  });
  const [nameLeaves, setNameLeaves] = useState([]);
  const [postImage, setPostImage] = useState([]);
  const [isNextApprover, setIsNextApprover] = useState(false);
  const [nextApproverId, setNextApproverId] = useState('');
  const [showAlert, setShowAlert] = useState({
    isShow: false,
    title: '',
    message: '',
  });
  // main function
  const alertMessage = message => {
    setShowAlert({
      isError: true,
      title: 'Thông báo',
      message: `${message} 👍`,
    });
  };
  const onHideAlert = () => {
    setShowAlert({
      isError: false,
      title: '',
      message: '',
    });
  };
  const openCreateNewLeaveDay = async () => {
    const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
    let obj = [];
    objectClone.forEach(element => {
      element.checked = false;
      obj.push(element);
    });
    setUserManagerList(obj);
    getRangeTimeLeave();
  };
  const getRangeTimeLeave = async () => {
    const responseRangeStart = await dispatch(
      getRangeTimeStart(
        Moment(leave.since).format('YYYY-MM-DD'),
        userDetails.id,
      ),
    );
    let tempArrRangeTimeStart = JSON.parse(JSON.stringify(responseRangeStart));
    let arrStart = [];
    tempArrRangeTimeStart.forEach(item => {
      const timeConverse = parseInt(item.slice(0, 2)) + 7;
      const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
      const time = hours + item.substring(2);
      arrStart.push(time);
    });
    if (arrStart.length > 0) {
      setRangeTimeStart(arrStart);
    }

    //finish time
    const responseRangeFinish = await dispatch(
      getRangeTimeFinish(
        Moment(leave.toDate).format('YYYY-MM-DD'),
        userDetails.id,
      ),
    );
    let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
    let arrFinish = [];
    tempArrRangeTime.forEach(item => {
      const timeConverse = parseInt(item.slice(0, 2)) + 7;
      const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
      const time = hours + item.substring(2);
      arrFinish.push(time);
    });
    if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
  };
  const onSelectDateStart = async time => {
    const responseRangeStart = await dispatch(
      getRangeTimeStart(Moment(time).format('YYYY-MM-DD'), userDetails.id),
    );
    let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeStart));
    let arrStart = [];
    tempArrRangeTime.forEach(item => {
      const timeConverse = parseInt(item.slice(0, 2)) + 7;
      const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
      const time = hours + item.substring(2);
      arrStart.push(time);
    });

    if (arrStart.length > 0) {
      setRangeTimeStart(arrStart);
    }
    setOpenTimePicker(state => ({
      ...state,
      start: false,
    }));
    setLeave(state => ({
      ...state,
      since: time,
    }));
  };
  const onSelectDateFinish = async time => {
    const responseRangeFinish = await dispatch(
      getRangeTimeFinish(Moment(time).format('YYYY-MM-DD'), userDetails.id),
    );
    let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
    let arrFinish = [];
    tempArrRangeTime.forEach(item => {
      const timeConverse = parseInt(item.slice(0, 2)) + 7;
      const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
      const time = hours + item.substring(2);
      arrFinish.push(time);
    });
    if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);

    setOpenTimePicker(state => ({
      ...state,
      finish: false,
    }));
    setLeave(state => ({
      ...state,
      toDate: time,
    }));
  };
  const onSubmitLeave = async () => {
    if (!leave.id) {
      alertMessage('Vui lòng chọn loại ngày nghỉ!');
      return;
    }
    if (!leave.since) {
      alertMessage('Vui lòng chọn ngày bắt đầu!');
      return;
    }
    if (!leave.timeStart) {
      alertMessage('Vui lòng chọn giờ bắt đầu!');
      return;
    }
    if (!leave.toDate) {
      alertMessage('Vui lòng chọn ngày kết thúc!');
      return;
    }
    if (!leave.timeFinish) {
      alertMessage('Vui lòng chọn giờ kết thúc!');
      return;
    }
    if (!leave.reason) {
      alertMessage('Vui lòng nhập lý do !');
      return;
    }
    if (!leave.approver_id) {
      alertMessage('Vui lòng chọn người duyệt!');
      return;
    }
    const isValid = isDateStartAndFinishChange();
    if (isValid) {
      //console.log('isValid', isValid);
      const res = await dispatch(
        postUserLeave(userDetails.id, leave, postImage, durationLeave.time),
      );
      //console.log('res', res);
      if (res) {
        Toast.show({
          type: 'success',
          text1: `Hệ thống`,
          text2: `Yêu cầu nghỉ phép thành công`,
          style: {zIndex: 1001},
          visibilityTime: 2000,
        });
        refreshAfterSubmit();
      } else {
        alertMessage('Bạn đã hết ngày nghỉ phép');
      }
      return;
    }
    alertMessage('Vui lòng nhập ngày bắt đầu nhỏ hơn ngày kết thúc');
  };
  const refreshAfterSubmit = () => {
    onClose(null);
    setLeave(initStateLeave);
  };
  const copyNameCategory = () => {
    idLeavesCategory.map((item, index) => {
      setNameLeaves(prevState => [...prevState, item.name]);
      return;
    });
  };

  const onSelectTimeStart = (selectedItem, indexItem) => {
    console.log('selectedItem', selectedItem);
    setLeave(state => ({
      ...state,
      timeStart: selectedItem,
    }));
  };
  const onSelectTimeFinish = (selectedItem, indexItem) => {
    setLeave(state => ({
      ...state,
      timeFinish: selectedItem,
    }));
  };
  const onSelectManager = async (value, index, item) => {
    let userManagerListClone = [...userManagerList];
    let elementFound = userManagerListClone.find(
      element => element.id == item.id,
    );
    let indexElementFound = userManagerListClone.findIndex(
      element => element.id == item.id,
    );
    userManagerListClone.splice(indexElementFound, 1, {
      ...elementFound,
      checked: value,
    });
    setUserManagerList(userManagerListClone);
    setLeave(state => ({
      ...state,
      approver_id: item.id,
    }));

    if (isNextApprover) {
      setNextApproverId(item.id);
    } else {
      setNextApproverId('');
      setLeave(state => ({
        ...state,
        approver_id: item.id,
      }));
    }
  };
  const isDateStartAndFinishChange = () => {
    if (leave.since <= leave.toDate) {
      let duration = calDurationLeave(leave.since, leave.toDate);
      let hour = 0;
      if (leave.timeStart && leave.timeFinish) {
        const hourDiff = Moment(leave.timeFinish, 'HH:mm').diff(
          Moment(leave.timeStart, 'HH:mm'),
          'hour',
        );
        //console.log('hourDiff', hourDiff);
        if (hourDiff < 9 && hourDiff > 0) {
          hour = 0.5;
        } else if (hourDiff >= 9) {
          hour = 1;
        } else {
          hour = 0;
        }
      }
      //console.log('hour', hour);
      //console.log('duration', duration);
      let total = parseFloat(duration && duration >= 0 ? duration : 0) + hour;
      //console.log('total', total);
      setDurationLeave({
        time: total,
        stringTime: total + ' Ngày',
      });
      return true;
    }
    return false;
  };
  const calDurationLeave = (fstDay, lstDay) => {
    var finish_day = new Moment(lstDay);
    var since_day = new Moment(fstDay);
    var duration = Moment.duration(finish_day.diff(since_day)).asHours();
    if (duration >= 24) {
      return duration / 24;
    }

    //console.log(duration);
    return duration;
  };
  const openGallery = () => {
    launchImageLibrary(
      {
        mediaType: 'photo',
        includeBase64: true,
      },
      response => {
        if (!response.didCancel) {
          //console.log('AAA');
          const {assets} = response;
          setPostImage(prev => [...prev, ...assets]);
          //console.log(response.assets[0].uri)
        }
      },
    );
  };
  const onDeleteImage = index => {
    const clone = [...postImage];
    clone.splice(index, 1);
    setPostImage(clone);
  };

  //useEffect
  useEffect(() => {
    openCreateNewLeaveDay();
  }, []);
  useEffect(() => {
    idLeavesCategory && copyNameCategory();
  }, [idLeavesCategory]);
  useEffect(() => {
    leave && isDateStartAndFinishChange();
  }, [leave]);
  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={true}
      onRequestClose={() => onClose(null)}>
      <SafeAreaView>
        <ScrollView>
          <View style={styles.modalView}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}>
              <Text style={styles.modalTitle}>Nghỉ phép mới</Text>
              <TouchableOpacity onPress={() => onClose(null)}>
                <Image source={IMAGES.IcClose} />
              </TouchableOpacity>
            </View>
            <View style={{flexDirection: 'row', marginTop: 10}}>
              <Image
                source={{
                  uri: 'https://meu.anawork.com' + userDetails.avatar,
                }}
                style={styles.ImgAvatar}
              />
              <View style={{marginLeft: 15}}>
                <Text style={styles.modalTitle}>{`${userDetails.first_name} ${
                  userDetails.middle_name ? userDetails.middle_name : ''
                } ${userDetails.last_name}`}</Text>
                <Text>{userDetails.position}</Text>
              </View>
            </View>
            <View style={{marginTop: 20}}>
              <Text style={styles.modalTitle}>Thông tin chung</Text>
              <View style={styles.rowView}>
                <View style={{flex: 1}}>
                  <Text
                    style={{
                      flex: 1,
                      color: leave.id.length === 0 ? 'red' : 'grey',
                    }}>
                    Loại nghỉ phép
                  </Text>
                </View>
                <View style={{flex: 1}}>
                  <SelectDropdown
                    data={nameLeaves}
                    dropdownIconPosition={'right'}
                    defaultButtonText={'Chọn loại nghỉ phép'}
                    buttonStyle={styles.dropdown1BtnStyle}
                    onSelect={(selectedItem, index) => {
                      setLeave(state => ({
                        ...state,
                        id: idLeavesCategory[index].id,
                      }));
                    }}
                    placeholder
                    dropdownStyle={styles.dropdown1DropdownStyle}
                    rowStyle={styles.dropdown1RowStyle}
                    rowTextStyle={styles.dropdown1RowTxtStyle}
                    buttonTextStyle={styles.dropdown1BtnTxtStyle}
                    renderDropdownIcon={isOpened => {
                      return (
                        <Image
                          source={
                            isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
                          }
                          style={{width: 20, height: 20}}
                        />
                      );
                    }}
                  />
                </View>
              </View>
              <View style={styles.rowView}>
                <Text style={{flex: 1}}>Từ ngày</Text>

                <View style={{flex: 1}}>
                  <TouchableOpacity
                    onPress={() =>
                      setOpenTimePicker(state => ({
                        ...state,
                        start: true,
                      }))
                    }
                    style={[
                      styles.dropdown1BtnStyle,
                      {
                        alignItems: 'flex-end',
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        paddingRight: 8,
                        paddingLeft: 16,
                      },
                    ]}>
                    <Text>{Moment(leave.since).format('DD/MM/YYYY')}</Text>
                    <Image
                      source={IMAGES.IcCalendarGray}
                      style={{width: 20, height: 20, marginLeft: 8}}
                    />
                  </TouchableOpacity>
                  <DateTimePickerModal
                    isVisible={openTimePicker.start}
                    mode="date"
                    date={leave.since}
                    onConfirm={time => {
                      onSelectDateStart(time);
                    }}
                    onCancel={() => {
                      setOpenTimePicker(state => ({
                        ...state,
                        start: false,
                      }));
                    }}
                  />
                </View>
              </View>
              <View style={styles.rowView}>
                <Text style={{flex: 1}}>Giờ</Text>
                <View style={{flex: 1}}>
                  <SelectDropdown
                    data={rangeTimeStart}
                    dropdownIconPosition={'right'}
                    defaultButtonText={leave.timeStart || 'Giờ'}
                    renderDropdownIcon={() => {
                      return (
                        <Image
                          source={IMAGES.IcLockGrey}
                          style={{width: 20, height: 20}}
                        />
                      );
                    }}
                    buttonStyle={styles.dropdown1BtnStyle}
                    buttonTextStyle={{fontSize: 14, textAlign: 'left'}}
                    dropdownStyle={styles.dropdownStyle}
                    rowStyle={styles.dropdown1RowStyle}
                    rowTextStyle={styles.dropdownSelectTimeText}
                    onSelect={(selectedItem, index) =>
                      onSelectTimeStart(selectedItem, index)
                    }
                  />
                </View>
              </View>
              <View style={styles.rowView}>
                <Text style={{flex: 1}}>Đến ngày</Text>
                <View style={{flex: 1}}>
                  <TouchableOpacity
                    onPress={() =>
                      setOpenTimePicker(state => ({
                        ...state,
                        finish: true,
                      }))
                    }
                    style={[
                      styles.dropdown1BtnStyle,
                      {
                        alignItems: 'flex-end',
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        paddingRight: 8,
                        paddingLeft: 16,
                      },
                    ]}>
                    <Text>{Moment(leave.toDate).format('DD/MM/YYYY')}</Text>
                    <Image
                      source={IMAGES.IcCalendarGray}
                      style={{width: 20, height: 20, marginLeft: 8}}
                    />
                  </TouchableOpacity>
                  <DateTimePickerModal
                    isVisible={openTimePicker.finish}
                    mode="date"
                    date={leave.toDate}
                    minimumDate={leave.since}
                    onConfirm={time => {
                      onSelectDateFinish(time);
                    }}
                    onCancel={() => {
                      setOpenTimePicker(state => ({
                        ...state,
                        finish: false,
                      }));
                    }}
                  />
                </View>
              </View>
              <View style={styles.rowView}>
                <Text style={{flex: 1}}>Giờ</Text>
                <View style={{flex: 1}}>
                  <SelectDropdown
                    data={rangeTimeFinish}
                    dropdownIconPosition={'right'}
                    defaultButtonText={leave.timeFinish || 'Giờ'}
                    renderDropdownIcon={() => {
                      return (
                        <Image
                          source={IMAGES.IcLockGrey}
                          style={{width: 20, height: 20}}
                        />
                      );
                    }}
                    buttonStyle={styles.dropdown1BtnStyle}
                    buttonTextStyle={{fontSize: 14, textAlign: 'left'}}
                    dropdownStyle={styles.dropdownStyle}
                    rowStyle={styles.dropdown1RowStyle}
                    rowTextStyle={styles.dropdownSelectTimeText}
                    onSelect={(selectedItem, index) =>
                      onSelectTimeFinish(selectedItem, index)
                    }
                  />
                </View>
              </View>
              <View style={styles.rowView}>
                <Text
                  style={{
                    flex: 1,
                  }}>{`Thời gian nghỉ (*)`}</Text>
                <View style={styles.takeTimeStyle}>
                  <Text style={{paddingLeft: 18}}>
                    {durationLeave.stringTime}
                  </Text>
                </View>
              </View>
              <View style={styles.rowView}>
                <Text
                  style={{
                    flex: 1,
                    color: leave.reason.length === 0 ? 'red' : 'grey',
                  }}>{`Lý do(*)`}</Text>
                <View
                  style={{
                    flex: 1,
                    borderBottomWidth: 0.2,
                    borderColor: '#444',
                  }}>
                  <TextInput
                    style={styles.inputText}
                    value={leave.reason}
                    placeholder="Nhập lý do tại đây"
                    onChangeText={text => {
                      setLeave(state => ({
                        ...state,
                        reason: text,
                      }));
                    }}
                  />
                </View>
              </View>
              <View style={{...styles.rowView, flexWrap: 'wrap'}}>
                <ButtonComponent
                  text={'Nghỉ việc riêng'}
                  textStyle={{fontSize: 12}}
                  style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
                  onPress={() =>
                    setLeave(state => ({
                      ...state,
                      reason: 'Nghỉ việc riêng',
                    }))
                  }
                />
                <ButtonComponent
                  text={'Nghỉ khám bệnh'}
                  textStyle={{fontSize: 12}}
                  style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
                  onPress={() =>
                    setLeave(state => ({
                      ...state,
                      reason: 'Nghỉ khám bệnh',
                    }))
                  }
                />
                <ButtonComponent
                  text={'Nghỉ việc không lương'}
                  textStyle={{fontSize: 12}}
                  style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
                  onPress={() =>
                    setLeave(state => ({
                      ...state,
                      reason: 'Nghỉ việc không lương',
                    }))
                  }
                />
              </View>
              <View style={styles.rowView}>
                <Text style={{flex: 1}}>Tệp đính kèm</Text>
                <View
                  style={{
                    flex: 2,
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: 10,
                  }}>
                  {postImage.length > 0 &&
                    postImage.map((item, index) => {
                      //console.log("item", item[0].uri)
                      return (
                        <View key={index}>
                          <ButtonComponent
                            iconSource={IMAGES.IcClose}
                            style={styles.btnClose}
                            onPress={() => onDeleteImage(index)}
                          />
                          <Image
                            source={{uri: item.uri}}
                            style={[styles.imgUpload]}
                          />
                        </View>
                      );
                    })}

                  {postImage.length < 3 && (
                    <ButtonComponent
                      style={styles.touchableOpacity}
                      onPress={openGallery}
                      iconSource={IMAGES.IcAddMoreImg}
                    />
                  )}
                </View>
              </View>
              <View style={{marginTop: 20}}>
                <Text
                  style={[
                    styles.modalTitle,
                    {
                      marginBottom: 10,
                    },
                  ]}>
                  Người duyệt
                </Text>
                {userManagerList.map((item, index) => (
                  <View
                    key={index}
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      marginTop: 4,
                    }}>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        paddingLeft: 18,
                      }}>
                      <Image
                        source={{
                          uri: 'https://meu.anawork.com' + item.avatar,
                        }}
                        style={styles.avatarApprove}
                      />
                      <Text
                        style={{
                          fontSize: 16,
                          fontWeight: '500',
                          marginLeft: 10,
                        }}>{`${item.extend_user_full_name}`}</Text>
                    </View>
                    <View style={{paddingRight: 10}}>
                      <CheckBox
                        disabled={false}
                        value={item.checked}
                        onValueChange={newValue =>
                          onSelectManager(newValue, index, item)
                        }
                        boxType="square"
                        animationDuration={0.3}
                        lineWidth={1}
                        key={index}
                      />
                    </View>
                  </View>
                ))}
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'flex-end',
                marginTop: 40,
              }}>
              <TouchableOpacity
                onPress={() => onClose(null)}
                style={styles.btnCancel}>
                <Text style={styles.blueTxt}>Hủy</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.btnSubmit}
                onPress={onSubmitLeave}>
                <Text style={styles.whiteTxt}>Gửi yêu cầu</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
        <Alert
          show={showAlert.isError}
          showProgress={false}
          title={showAlert.title}
          message={showAlert.message}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showConfirmButton={true}
          confirmText="Đóng"
          confirmButtonColor="#DD6B55"
          onConfirmPressed={onHideAlert}
        />
      </SafeAreaView>
    </Modal>
  );
};
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  whiteTxt: {
    color: colors.white,
    fontWeight: '500',
  },
  blueTxt: {
    color: '#5d78ff',
    fontWeight: '500',
  },

  modalView: {
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    marginTop: 20,
    height: windowHeight,
  },

  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },

  modalTitle: {
    fontWeight: '500',
    fontSize: 16,
  },
  dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
  dropdown1RowStyle: {
    backgroundColor: '#EFEFEF',
    borderBottomColor: '#C5C5C5',
    height: 38,
    borderRadius: 4,
  },
  dropdown1RowTxtStyle: {color: '#444', textAlign: 'left', fontSize: 14},
  dropdownSelectTimeText: {color: '#444', textAlign: 'left', fontSize: 14},
  dropdown1BtnStyle: {
    backgroundColor: '#FFF',
    borderBottomWidth: 0.2,
    height: 24,
    width: '100%',
    fontSize: 12,
    borderColor: '#444',
  },
  dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'left'},
  rowView: {
    flexDirection: 'row',
    marginTop: 10,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  inputText: {
    backgroundColor: '#FFF',
    paddingLeft: 18,
    marginTop: 4,
  },
  touchableOpacity: {
    borderColor: colors.primary_blue,
    borderStyle: 'dotted',
    borderWidth: 2,
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    padding: 10,
    width: 50,
  },
  btnSubmit: {
    backgroundColor: '#5d78ff',
    justifyContent: 'center',
    alignItems: 'center',
    height: 40,
    borderRadius: 8,
    width: 100,
  },
  btnCancel: {
    backgroundColor: colors.white,
    justifyContent: 'center',
    alignItems: 'center',
    height: 40,
    borderRadius: 8,
    width: 100,
  },
  ImgAvatar: {
    width: 50,
    height: 50,
    borderRadius: 30,
  },
  imgUpload: {
    resizeMode: 'contain',
    height: 80,
    width: 80,
  },

  reason: {
    width: windowWidth / 2 - 25,
    textAlign: 'right',
  },

  checkbox: {
    alignSelf: 'center',
    height: 16,
    width: 16,
    marginRight: 4,
  },

  avatarApprove: {
    width: 32,
    height: 32,
    borderRadius: 4,
  },

  btnCancel: {
    paddingHorizontal: 8,
    paddingVertical: 12,
  },

  takeTimeStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    borderBottomColor: '#444',
    borderBottomWidth: 0.2,
    height: 24,
  },
  btnClose: {
    width: 20,
    height: 20,
    position: 'absolute',
    top: -10,
    right: 0,
  },
});

export default OnLeaveModalAddNew;
