//@ts-nocheck
import React from 'react';
import { TouchableOpacity, View, ViewStyle } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { IconMoney2, IconQuestion, IconTick, IconTima16 } from '../assets/svgs';
import { formatMoney } from '../utils';
import { MText } from './MText';
import {
  Icon1,
  Icon10,
  Icon2,
  Icon3,
  Icon4,
  Icon5,
  Icon6,
  Icon7,
  Icon8,
  Icon9,
  IconStep1,
  IconStep1Success,
  IconStep2,
  IconStep2Disable,
  IconStep2Success,
  IconStep3,
  IconStep3Disable,
  IconStep3Success,
  IconStep4,
  IconStep4Disable,
  IconStep4Success,
  IconStep5,
  IconStep5Disable,
  IconStep5Success,
  IconSuccess,
} from '../assets/v3';
import { Close2Icon, CloseIcon, Info } from '../assets/icons';
import { ScreenNames } from '../navigation';
import { color } from '../theme';
import Modal from 'react-native-modal';
import { commonStyles } from '../screens/CommonStyles';

interface IProps {
  item: any;
  navigation: any;
}

const $action: ViewStyle = {
  flexDirection: 'column',
  alignItems: 'center',
  gap: 5,
};

export default function ItemTimaOneV3({ item, navigation }: IProps) {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <>
      <View
        style={{
          backgroundColor: '#FFFFFF',
          paddingHorizontal: 16,
          marginBottom: 16,
          borderRadius: 8,
          borderWidth: 0.5,
          borderColor: '#E0E0E0',
        }}
      >
        <LinearGradient
          colors={
            item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
              ? ['#4CBA3D', '#98D788']
              : ['#FF8E4F', '#EF592E']
          }
          style={{
            borderTopLeftRadius: 8,
            borderTopRightRadius: 8,
            marginHorizontal: -16,
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              paddingHorizontal: 16,
              paddingVertical: 8,
            }}
          >
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
              }}
            >
              <IconMoney2 />
              <MText
                style={{
                  fontSize: 12,
                  color: 'white',
                }}
              >
                HD-{item?.id}
              </MText>
            </View>
            <MText
              style={{
                fontSize: 12,
                color: 'white',
                fontWeight: 'bold',
              }}
            >
              {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
                ? formatMoney(
                  item?.listLoanAllAutoDE.reduce(
                    (sum, item) => sum + item.totalMoney,
                    0
                  )
                )
                : formatMoney(item?.loanAmount)}
              đ
            </MText>
          </View>
        </LinearGradient>

        {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
          <View
            style={{
              marginHorizontal: -16,
              backgroundColor: '#ECFFE8',
              paddingHorizontal: 16,
              paddingVertical: 8,
            }}
          >
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <MText
                style={{
                  fontSize: 10,
                  color: '#878787',
                  marginLeft: 24,
                }}
              >
                Số tiền giải ngân
              </MText>
              <MText
                style={{
                  fontSize: 10,
                  color: '#333333',
                }}
              >
                {formatMoney(
                  item?.listLoanAllAutoDE.reduce(
                    (sum, item) => sum + item.loanAmount,
                    0
                  )
                )}{' '}
                đ
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 6,
              }}
            >
              <MText
                style={{
                  fontSize: 10,
                  color: '#878787',
                  marginLeft: 24,
                }}
              >
                Số tiền bảo hiểm
              </MText>
              <MText
                style={{
                  fontSize: 10,
                  color: '#333333',
                }}
              >
                {formatMoney(
                  item?.listLoanAllAutoDE.reduce(
                    (sum, item) => sum + item.insurenceMoney,
                    0
                  )
                )}{' '}
                đ
              </MText>
            </View>
          </View>
        )}

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop:
              item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0
                ? 16
                : 32,
            // paddingHorizontal: 16,
          }}
        >
          {/* Đơn topup = 6 sẽ không có phần thông tin tài sản */}
          {(item?.typeLoan === 5 || item.typeLoan === 7) && (
            <TouchableOpacity
              disabled={item?.step === 0 || item?.step === 1 ? false : true}
              style={$action}
              onPress={() => {
                if (item?.typeLoan === 7) {
                  navigation.push(ScreenNames.LoanBuyCar, {
                    loan: item,
                  });
                } else {
                  if (item?.step === 0) {
                    navigation.push(ScreenNames.VehicleCamera, {
                      loan: item,
                      front: true,
                    });
                  } else {
                    navigation.push(ScreenNames.AssetInformation, {
                      loan: item,
                    });
                  }
                }
              }}
            >
              {item?.step <= 1 ? <IconStep1 /> : <IconStep1Success />}
              <MText
                style={{
                  textAlign: 'center',
                  fontSize: 10,
                  marginTop: 5,
                  color: item?.step <= 1 ? '#EF592E' : '#333333',
                }}
              >
                Thông tin{'\n'}tài sản
              </MText>
            </TouchableOpacity>
          )}
          <TouchableOpacity
            disabled={item?.step === 3 ? false : true}
            style={$action}
            onPress={() => {
              navigation.push(ScreenNames.ReviewLoan, {
                loan: item,
              });
            }}
          >
            {item?.step < 3 ? (
              <IconStep2Disable />
            ) : item?.step === 3 ? (
              <IconStep2 />
            ) : (
              <IconStep2Success />
            )}
            <MText
              style={{
                textAlign: 'center',
                fontSize: 10,
                marginTop: 5,
                color:
                  item?.step < 3
                    ? '#999999'
                    : item?.step === 3
                      ? '#EF592E'
                      : '#333333',
              }}
            >
              Thông tin{'\n'}khoản vay
            </MText>
          </TouchableOpacity>
          <TouchableOpacity
            disabled={
              item?.step === 4 || item?.step === 5 || item?.step === 6
                ? false
                : true
            }
            style={$action}
            onPress={() => {
              if (item?.step === 4) {
                navigation.push(ScreenNames.OCR, {
                  loan: item,
                  front: true,
                });
              } else if (item?.step === 5) {
                if (item?.typeLoan === 5) {
                  navigation.push(ScreenNames.ReviewInformation, {
                    loan: item,
                  });
                } else {
                  navigation.push(ScreenNames.TopupLoanInfo, {
                    loan: item,
                  });
                }
              } else if (item?.step === 6) {
                navigation.push(ScreenNames.ReviewInformationOther, {
                  loan: item,
                });
              }
            }}
          >
            {item?.step < 4 ? (
              <IconStep3Disable />
            ) : item?.step === 4 || item?.step === 5 || item?.step === 6 ? (
              <IconStep3 />
            ) : (
              <IconStep3Success />
            )}
            <MText
              style={{
                textAlign: 'center',
                fontSize: 10,
                marginTop: 5,
                color:
                  item?.step < 4
                    ? '#999999'
                    : item?.step === 4 || item?.step === 5 || item?.step === 6
                      ? '#EF592E'
                      : '#333333',
              }}
            >
              Thông tin{'\n'}cá nhân
            </MText>
          </TouchableOpacity>
          <TouchableOpacity
            disabled={item?.step === 9 ? false : true}
            style={$action}
            onPress={() => {
              navigation.push(ScreenNames.LivenessV2, {
                loan: item,
              });
            }}
          >
            {item?.step < 9 || item?.step === 100 ? (
              <IconStep4Disable />
            ) : item?.step === 9 ? (
              <IconStep4 />
            ) : (
              <IconStep4Success />
            )}
            <MText
              style={{
                textAlign: 'center',
                fontSize: 10,
                marginTop: 5,
                color:
                  item?.step < 9 || item?.step === 100
                    ? '#999999'
                    : item?.step === 9
                      ? '#EF592E'
                      : '#333333',
              }}
            >
              EKYC
            </MText>
          </TouchableOpacity>
          <TouchableOpacity
            disabled={item?.step === 10 ? false : true}
            style={$action}
            onPress={() => {
              navigation.push(ScreenNames.TTSSignLoan, {
                loan: item,
              });
            }}
          >
            {item?.step < 10 || item?.step === 100 ? (
              <IconStep5Disable />
            ) : item?.step === 10 ? (
              <IconStep5 />
            ) : (
              <IconStep5Success />
            )}
            <MText
              style={{
                textAlign: 'center',
                fontSize: 10,
                marginTop: 5,
                color:
                  item?.step < 10 || item?.step === 100
                    ? '#999999'
                    : item?.step === 10
                      ? '#EF592E'
                      : '#333333',
              }}
            >
              Ký hợp{'\n'}đồng
            </MText>
          </TouchableOpacity>
        </View>

        {item?.step !== 11 ? (
          <View
            style={{
              backgroundColor: '#FFF3E9',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 4,
              borderRadius: 4,
              paddingHorizontal: 8,
              paddingVertical: 10,
              marginTop: 16,
            }}
          >
            <IconQuestion/>
            <MText
              style={{
                fontSize: 10,
                flex: 1,
              }}
            >
              Hướng dẫn các bước hoàn thiện đơn vay
            </MText>
            <TouchableOpacity onPress={() => setShowModal(true)}>
              <MText
                style={{
                  fontSize: 10,
                  color: color.primary,
                  textDecorationLine: 'underline',
                }}
              >
                Xem thêm
              </MText>
            </TouchableOpacity>
          </View>
        ) : (
          <View
            style={{
              backgroundColor: '#E8FFE9',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 8,
              borderRadius: 4,
              paddingHorizontal: 8,
              paddingVertical: 10,
              marginTop: 16,
            }}
          >
            <IconTick />
            <MText style={{ color: '#28A745', fontSize: 10, flex: 1 }}>
              Hợp đồng đã ký thành công. Quý khách vui lòng chờ Chuyên viên tư
              vấn liên hệ để hoàn tất bước giải ngân.
            </MText>
          </View>
        )}

        {item?.step !== 11 ? (
          <View style={$row}>
            <View style={{ flex: 1, paddingRight: 24 }}>
              <MText
                style={{
                  color: '#999999',
                  fontSize: 12,
                }}
              >
                Trạng thái
              </MText>
              <MText
                style={{
                  fontSize: 12,
                  fontWeight: 'bold',
                }}
              >
                {item?.step <= 1
                  ? 'Chờ cập nhật thông tin tài sản'
                  : item?.step === 3
                    ? `Chờ cập nhật thông tin khoản vay`
                    : item?.step === 4 || item?.step === 5 || item?.step === 6
                      ? `Chờ cập nhật thông tin cá nhân`
                      : item?.step === 9
                        ? `Chờ cập nhật eKYC`
                        : item?.step === 11
                          ? `Hợp đồng đã ký thành công. Vui lòng chờ chuyên viên tư vấn liên hệ`
                          : 'Đơn vay đang trong quá trình xử lý'}
              </MText>
            </View>
            {item?.step <= 1 ? (
              <TouchableOpacity
                onPress={() => {
                  if (item?.typeLoan === 7) {
                    navigation.push(ScreenNames.LoanBuyCar, {
                      loan: item,
                    });
                  } else {
                    if (item?.step === 0) {
                      navigation.push(ScreenNames.VehicleCamera, {
                        loan: item,
                        front: true,
                      });
                    } else {
                      navigation.push(ScreenNames.AssetInformation, {
                        loan: item,
                      });
                    }
                  }
                }}
              >
                <LinearGradient
                  colors={['#FF8E4F', '#EF592E']}
                  style={{
                    height: 30,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 24,
                    paddingHorizontal: 10,
                  }}
                >
                  <MText
                    style={{
                      color: 'white',
                      fontSize: 12,
                    }}
                  >
                    Cập nhật
                  </MText>
                </LinearGradient>
              </TouchableOpacity>
            ) : item?.step === 3 ? (
              <TouchableOpacity
                onPress={() => {
                  if (item?.step === 3) {
                    navigation.push(ScreenNames.ReviewLoan, {
                      loan: item,
                    });
                  }
                }}
              >
                <LinearGradient
                  colors={['#FF8E4F', '#EF592E']}
                  style={{
                    height: 30,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 24,
                    paddingHorizontal: 10,
                  }}
                >
                  <MText
                    style={{
                      color: 'white',
                      fontSize: 12,
                    }}
                  >
                    Cập nhật
                  </MText>
                </LinearGradient>
              </TouchableOpacity>
            ) : item?.step === 4 || item?.step === 5 || item?.step === 6 ? (
              <TouchableOpacity
                onPress={() => {
                  if (item?.step === 4) {
                    navigation.push(ScreenNames.OCR, {
                      loan: item,
                      front: true,
                    });
                  } else if (item?.step === 5) {
                    if (item?.typeLoan === 5) {
                      navigation.push(ScreenNames.ReviewInformation, {
                        loan: item,
                      });
                    } else {
                      navigation.push(ScreenNames.TopupLoanInfo, {
                        loan: item,
                      });
                    }
                  } else if (item?.step === 6) {
                    navigation.push(ScreenNames.ReviewInformationOther, {
                      loan: item,
                    });
                  }
                }}
              >
                <LinearGradient
                  colors={['#FF8E4F', '#EF592E']}
                  style={{
                    height: 30,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 24,
                    paddingHorizontal: 10,
                  }}
                >
                  <MText
                    style={{
                      color: 'white',
                      fontSize: 12,
                    }}
                  >
                    Cập nhật
                  </MText>
                </LinearGradient>
              </TouchableOpacity>
            ) : item?.step === 9 ? (
              <TouchableOpacity
                onPress={() => {
                  navigation.push(ScreenNames.LivenessV2, {
                    loan: item,
                  });
                }}
              >
                <LinearGradient
                  colors={['#FF8E4F', '#EF592E']}
                  style={{
                    height: 30,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 24,
                    paddingHorizontal: 10,
                  }}
                >
                  <MText
                    style={{
                      color: 'white',
                      fontSize: 12,
                    }}
                  >
                    Cập nhật
                  </MText>
                </LinearGradient>
              </TouchableOpacity>
            ) : item?.step === 10 ? (
              <TouchableOpacity
                onPress={() => {
                  navigation.push(ScreenNames.TTSSignLoan, {
                    loan: item,
                  });
                }}
              >
                <LinearGradient
                  colors={['#FF8E4F', '#EF592E']}
                  style={{
                    height: 30,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 24,
                    paddingHorizontal: 10,
                  }}
                >
                  <MText
                    style={{
                      color: 'white',
                      fontSize: 12,
                    }}
                  >
                    Ký hợp đồng
                  </MText>
                </LinearGradient>
              </TouchableOpacity>
            ) : (
              <></>
            )}
          </View>
        ) : (
          <></>
        )}

        {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
          <View>
            <MText
              style={{
                fontSize: 12,
                fontWeight: 'bold',
                marginTop: 16,
                color: '#333333',
              }}
            >
              Danh sách đơn chia nhỏ
            </MText>
            {item?.listLoanAllAutoDE.map((x, index) => (
              <View
                key={index}
                style={{
                  marginTop: 8,
                  borderBottomWidth:
                    index + 1 === item?.listLoanAllAutoDE.length ? 0 : 1,
                  borderColor: '#E0E0E0',
                  paddingBottom: 8,
                }}
              >
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      gap: 10,
                    }}
                  >
                    <IconTima16 />
                    <MText
                      style={[
                        commonStyles.textNormal,
                        {
                          color: '#333333',
                          fontSize: 12,
                        },
                      ]}
                    >
                      HD-{x?.loanBriefId} ({index + 1})
                    </MText>
                  </View>
                  <MText
                    style={[
                      commonStyles.textNormalBold,
                      {
                        color: '#333333',
                        fontSize: 12,
                      },
                    ]}
                  >
                    {formatMoney(x?.totalMoney)} đ
                  </MText>
                </View>
              </View>
            ))}
          </View>
        )}
        {item?.listLoanAllAutoDE && item?.listLoanAllAutoDE.length > 0 && (
          <TouchableOpacity
            onPress={() => {
              navigation.push(ScreenNames.LoanInterestRate, {
                loan: item,
              });
            }}
            style={{
              flex: 1,
              alignItems: 'center',
              backgroundColor: '#EDF6FF',
              marginHorizontal: -16,
              paddingVertical: 10,
            }}
          >
            <MText
              style={[
                {
                  fontSize: 12,
                  color: '#2F80ED',
                },
              ]}
            >
              Bảng biểu lãi phí đơn vay {`->`}
            </MText>
          </TouchableOpacity>
        )}
        {item?.step !== 11 ? (
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 8,
              backgroundColor: '#FFF2F2',
              marginHorizontal: -16,
              paddingVertical: 10,
              borderBottomRightRadius: 8,
              borderBottomLeftRadius: 8,
              paddingHorizontal: 10,
            }}
          >
            <Info />
            <MText
              style={[
                {
                  fontSize: 10,
                  color: '#E40010',
                  flex: 1,
                },
              ]}
            >
              {item?.step <= 1
                ? 'Vui lòng cập nhật thông tin tài sản để được giải ngân sớm nhất!'
                : item?.step === 3
                  ? `Vui lòng cập nhật thông tin khoản vay để được giải ngân sớm nhất!`
                  : item?.step === 4 || item?.step === 5 || item?.step === 6
                    ? `Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!`
                    : item?.step === 9
                      ? `Bước cuối cùng rồi, vui lòng ký hợp đồng để được giải ngân sớm nhất nhé!`
                      : 'Đơn vay đang trong quá trình xử lý'}
            </MText>
          </View>
        ) : (
          <></>
        )}
      </View>

      <Modal isVisible={showModal} onBackdropPress={() => setShowModal(false)}>
        <View
          style={{
            backgroundColor: 'white',
            borderRadius: 8,
            padding: 16,
          }}
        >
          <MText
            style={{
              fontSize: 16,
              fontWeight: 'bold',
              textAlign: 'center',
              marginTop: 16,
            }}
          >
            Các bước hoàn thiện khoản vay
          </MText>
          <MText
            style={{
              textAlign: 'center',
              color: '#828282',
            }}
          >
            Thực hiện theo các bước sau
          </MText>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon1 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 1
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  THÔNG TIN XE
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Chụp 2 mặt hình ảnh Đăng ký xe
            </MText>
          </View>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon2 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 2
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  THÔNG TIN KHOẢN VAY
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Lựa chọn: Số tiền vay, Thời hạn vay, ...
            </MText>
          </View>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon3 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 3
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  THÔNG TIN CÁ NHÂN
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Thực hiện NFC/ OCR giấy tờ CCCD/CC và chụp 1 ảnh chân dung
            </MText>
          </View>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon4 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 4
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>EKYC</MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Thực hiện eKYC khuôn mặt
            </MText>
          </View>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon5 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 5
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  KÝ HỢP ĐỒNG
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Ký số bằng OTP hoặc qua Ứng dụng Mysign
            </MText>
            <MText style={{ fontSize: 10, color: '#999999' }}>
              Lưu ý: Để bảo mật thông tin cá nhân, hợp đồng sẽ được ký tại
              Viettel qua Ứng dụng MySign, Website hopdongdientu.viettel.vn,...
            </MText>
          </View>

          <View
            style={{
              backgroundColor: '#FFF8F2',
              padding: 12,
              borderRadius: 8,
              marginTop: 16,
            }}
          >
            <MText style={{ fontSize: 12, fontWeight: 'bold' }}>
              Ý nghĩa biểu tượng
            </MText>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 16,
                marginTop: 8,
              }}
            >
              <MText style={{ fontSize: 10, width: '35%' }}>
                Đang cần thực hiện
              </MText>
              <View
                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
              >
                <Icon1 />
                <Icon2 />
                <Icon3 />
                <Icon4 />
                <Icon5 />
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 16,
                marginTop: 8,
              }}
            >
              <MText style={{ fontSize: 10, width: '35%' }}>
                Chưa thể thực hiện
              </MText>
              <View
                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
              >
                <Icon6 />
                <Icon7 />
                <Icon8 />
                <Icon9 />
                <Icon10 />
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 16,
                marginTop: 8,
              }}
            >
              <MText style={{ fontSize: 10, width: '35%' }}>
                Đã hoàn thành
              </MText>
              <View
                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
              >
                <IconSuccess />
              </View>
            </View>
          </View>

          <TouchableOpacity
            style={{ position: 'absolute', top: 16, right: 16 }}
            onPress={() => setShowModal(false)}
          >
            <Close2Icon />
          </TouchableOpacity>
        </View>
      </Modal>
    </>
  );
}
const $row: ViewStyle = {
  flexDirection: 'row',
  // borderBottomWidth: 1,
  // borderColor: '#E0E0E0',
  paddingBottom: 16,
  marginTop: 16,
};
