//@ts-nocheck
import React, { useEffect } from 'react';
import {
  Alert,
  Dimensions,
  Image,
  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 '../../components/MText';
import Modal from 'react-native-modal';
import {
  IconStep1,
  IconStep1Disable,
  IconStep2Disable,
  IconStep1Success,
  IconStep3Disable,
  IconStep4Disable,
  IconStep2,
  IconStep2Success,
  IconStep3,
  IconStep4,
  IconStep4Success,
  IconStep3Success,
} from '../../assets/digital_topup';
import { color } from '../../theme';
import { ScreenNames } from '../../navigation';
import { Close2Icon, Info } from '../../assets/icons';
import { Api } from '../../services/api';
import {
  Icon10,
  Icon2,
  Icon3,
  Icon4,
  Icon5,
  Icon6,
  Icon7,
  Icon8,
  Icon9,
  IconSuccess,
} from '../../assets/v3';

interface IProps {
  item?: any;
  navigation: any;
  callback?: () => void;
}
export default function DigitalTopupItem({
  item,
  navigation,
  callback,
}: IProps) {
  const [showModal, setShowModal] = React.useState(false);
  const [showModalInfo, setShowModalInfo] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [showAlert, setShowAlert] = React.useState(false);

  useEffect(() => {
    if (item && item?.isPopupSuggestTopup === true) {
      setShowModalInfo(true);
    } else if (item?.step === 8) {
      setShowAlert(true);
    }
  }, [item]);

  const onConfirm = async (typeId) => {
    try {
      setIsLoading(true);
      const response = await Api.getInstance().confirmLoanDigitalTopup({
        loanBriefId: item?.id,
        typeId: typeId,
      });
      if (response?.kind === 'ok' && response?.data?.meta?.errorCode === 200) {
        setShowModalInfo(false);
        if (callback) {
          setTimeout(() => {
            callback();
          }, 300);
        }
      } else {
        Alert.alert(
          'Thông báo',
          response.data.meta.errorMessage ||
            'Có lỗi xảy ra, vui lòng thử lại sau!'
        );
      }
    } catch (error) {
      Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau!');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <View
        style={{
          backgroundColor: '#FFFFFF',
          paddingHorizontal: 16,
          marginBottom: 16,
          borderRadius: 8,
          borderWidth: 0.5,
          borderColor: '#E0E0E0',
        }}
      >
        <LinearGradient
          colors={['#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',
              }}
            >
              {formatMoney(item?.loanAmount)}đ
            </MText>
          </View>
        </LinearGradient>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop: 16,
          }}
        >
          <TouchableOpacity
            disabled={item?.step === 3 ? false : true}
            style={$action}
            onPress={() => {
              navigation.push(ScreenNames.ReviewLoan, {
                loan: item,
              });
            }}
          >
            {item?.step < 3 ? (
              <IconStep1Disable />
            ) : item?.step === 3 ? (
              <IconStep1 />
            ) : (
              <IconStep1Success />
            )}
            <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
            style={$action}
            disabled={item?.step === 4 || item?.step === 5 ? false : true}
            onPress={() => {
              if (item?.step === 4) {
                navigation.push(ScreenNames.OCR, {
                  loan: item,
                  front: true,
                });
              } else if (item?.step === 5) {
                navigation.push(ScreenNames.TopupLoanInfo, {
                  loan: item,
                });
              }
            }}
          >
            {item?.step < 4 ? (
              <IconStep2Disable />
            ) : item?.step === 4 || item?.step === 5 ? (
              <IconStep2 />
            ) : (
              <IconStep2Success />
            )}
            <MText
              style={{
                textAlign: 'center',
                fontSize: 10,
                marginTop: 5,
                color:
                  item?.step < 4
                    ? '#999999'
                    : item?.step === 4 || item?.step === 5
                    ? '#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 ? (
              <IconStep3Disable />
            ) : item?.step === 9 ? (
              <IconStep3 />
            ) : (
              <IconStep3Success />
            )}
            <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 ? (
              <IconStep4Disable />
            ) : item?.step === 10 ? (
              <IconStep4 />
            ) : (
              <IconStep4Success />
            )}
            <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
                  ? `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?.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 ? (
              <TouchableOpacity
                onPress={() => {
                  if (item?.step === 4) {
                    navigation.push(ScreenNames.OCR, {
                      loan: item,
                      front: true,
                    });
                  } else if (item?.step === 5) {
                    navigation.push(ScreenNames.TopupLoanInfo, {
                      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?.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
                ? `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={showModalInfo}
        backdropColor="#000"
        backdropOpacity={0.5}
      >
        <View
          style={{
            borderRadius: 8,
            backgroundColor: 'white',
          }}
        >
          <Image
            source={require('../../assets/tts/Banner.png')}
            style={{
              width: '100%',
              borderTopLeftRadius: 8,
              borderTopRightRadius: 8,
              height: (Dimensions.get('window').height / 2) * 0.7,
              resizeMode: 'cover',
            }}
          />
          <MText
            style={{
              fontSize: 16,
              fontWeight: 'bold',
              textAlign: 'center',
              marginVertical: 16,
            }}
          >
            Chúc mừng bạn!
          </MText>
          <MText
            style={{
              textAlign: 'center',
              paddingHorizontal: 16,
              color: '#828282',
            }}
          >
            Bạn đã được phê duyệt{' '}
            <MText
              style={{
                color: '#EF592E',
                fontWeight: 'bold',
              }}
            >
              {item?.productNameTopup}
            </MText>{' '}
            với số tiền là{' '}
            <MText
              style={{
                color: '#EF592E',
                fontWeight: 'bold',
              }}
            >
              {formatMoney(item?.loanAmount)}
            </MText>{' '}
            VNĐ! Vui lòng eKYC - hoàn thiện xác thực khuôn mặt và ký hợp đồng để
            được giải ngân
          </MText>
          <TouchableOpacity
            disabled={isLoading}
            onPress={() => onConfirm(1)}
            style={{
              borderWidth: 1,
              borderColor: '#EF592E',
              borderRadius: 24,
              paddingHorizontal: 16,
              paddingVertical: 10,
              alignSelf: 'center',
              marginTop: 24,
            }}
          >
            <MText
              style={{
                color: '#EF592E',
              }}
            >
              Xác nhận khoản vay
            </MText>
          </TouchableOpacity>

          <TouchableOpacity
            disabled={isLoading}
            onPress={() => onConfirm(2)}
            style={{
              paddingHorizontal: 16,
              paddingVertical: 10,
              alignSelf: 'center',
            }}
          >
            <MText style={{ color: '#8E8E93' }}>Tôi cần vay số tiền khác</MText>
          </TouchableOpacity>
          <View
            style={{
              backgroundColor: '#EDF6FF',
              paddingVertical: 8,
              borderBottomLeftRadius: 8,
              borderBottomRightRadius: 8,
              marginTop: 16,
              alignItems: 'center',
            }}
          >
            <TouchableOpacity
              onPress={() => {
                setShowModalInfo(false);
                setTimeout(() => {
                  navigation.push(ScreenNames.LoanInterestRate, {
                    loan: item,
                  });
                }, 300);
              }}
            >
              <MText style={{ color: '#2F80ED', fontSize: 12 }}>
                Bảng biểu lãi phí đơn vay {`->`}
              </MText>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
      <Modal
        isVisible={showModal}
        backdropColor="#000"
        backdropOpacity={0.5}
        onBackdropPress={() => setShowModal(false)}
      >
        <View
          style={{
            borderRadius: 12,
            backgroundColor: 'white',
            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',
                }}
              >
                <Icon2 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 1
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  THÔNG TIN KHOẢN VAY
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Nhập thông tin: 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 2
                </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 3
                </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 4
                </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 }}
              >
                <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 }}
              >
                <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>
      <Modal
        isVisible={showAlert}
        backdropColor="#000"
        backdropOpacity={0.5}
        onBackdropPress={() => setShowAlert(false)}
      >
        <View
          style={{
            borderRadius: 12,
            backgroundColor: 'white',
            padding: 16,
          }}
        >
          <View style={{ alignItems: 'flex-end' }}>
            <TouchableOpacity onPress={() => setShowAlert(false)}>
              <Close2Icon />
            </TouchableOpacity>
          </View>
          <Image
            source={require('../../assets/tts/Layer_1.png')}
            style={{
              width: '100%',
              height: 120,
              resizeMode: 'contain',
            }}
          />
          <MText
            style={{
              textAlign: 'center',
              fontFamily: 'BeVietnamPro-SemiBold',
              fontSize: 16,
              fontWeight: '600',
              marginTop: 16,
            }}
          >
            Đơn vay đang chờ tìm nguồn giải ngân phù hợp
          </MText>
          <MText
            style={{
              textAlign: 'center',
              color: '#828282',
              marginTop: 16,
            }}
          >
            Vui lòng chờ ít phút sau đó thực hiện các bước tiếp theo để hoàn
            thiện khoản vay!
          </MText>
          <View style={{ alignItems: 'center', marginTop: 24 }}>
            <TouchableOpacity
              onPress={() => setShowAlert(false)}
              style={{
                borderWidth: 1,
                borderColor: '#EF592E',
                height: 40,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 24,
                width: 150,
              }}
            >
              <MText style={{ color: '#EF592E' }}>Đã hiểu</MText>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </>
  );
}
const $action: ViewStyle = {
  flexDirection: 'column',
  alignItems: 'center',
  gap: 5,
};
const $row: ViewStyle = {
  flexDirection: 'row',
  // borderBottomWidth: 1,
  // borderColor: '#E0E0E0',
  paddingBottom: 16,
  marginTop: 16,
};
