//@ts-nocheck
import React from 'react';
import { TouchableOpacity, View, ViewStyle } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  IconEdit,
  IconEditDisable,
  IconEditSuccess,
  IconEkyc,
  IconEkycDisable,
  IconEkycSuccess,
  IconMoney2,
  IconOcr,
  IconOCRSuccess,
  IconSignDisable,
  IconSignSuccess,
  IconTick,
} from '../assets/svgs';
import { MText } from './MText';
import { formatMoney } from '../utils';
import { ScreenNames } from '../navigation';
import { IconSign2, Info } from '../assets/icons';

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

interface ItemTimaOneV2 {
  item: any;
  navigation: any;
}
export default function ItemTimaOneV2({ item, navigation }: ItemTimaOneV2) {
  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',
              }}
            >
              Số tiền đăng ký vay
            </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: 24,
        }}
      >
        <TouchableOpacity
          disabled={item?.step >= 3 ? true : false}
          style={$action}
          onPress={() => {
            if (item?.step === 0) {
              navigation.push(ScreenNames.OCR, {
                loan: item,
                front: true,
              });
            } else if (item?.step === 1) {
              navigation.push(ScreenNames.VehicleCamera, {
                loan: item,
                front: true,
              });
            } else if (item?.step === 2) {
              navigation.push(ScreenNames.RegisterCamera, {
                loan: item,
              });
            }
          }}
        >
          {item?.step >= 3 ? <IconOCRSuccess /> : <IconOcr />}
          <MText
            style={{
              textAlign: 'center',
              fontSize: 10,
              marginTop: 5,
              color: '#333333',
            }}
          >
            OCR{'\n'}chứng từ
          </MText>
        </TouchableOpacity>
        <TouchableOpacity
          disabled={item?.step !== 3 ? true : false}
          style={$action}
          onPress={() => {
            if (item?.step === 3) {
              if (item?.typeLoan === 5) {
                navigation.push(ScreenNames.ReviewInformation, {
                  loan: item,
                });
              } else if (item?.typeLoan === 6) {
                navigation.push(ScreenNames.TopupLoanInfo, {
                  loan: item,
                });
              }
            }
          }}
        >
          {item.step > 3 ? (
            <IconEditSuccess />
          ) : item.step === 3 ? (
            <IconEdit />
          ) : (
            <IconEditDisable />
          )}
          <MText
            style={{
              textAlign: 'center',
              fontSize: 10,
              marginTop: 5,
              color: '#333333',
            }}
          >
            Cập nhật{'\n'}thông tin
          </MText>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            navigation.push(ScreenNames.LivenessV2, {
              loan: item,
            });
          }}
          style={$action}
          disabled={item?.step === 6 ? false : true}
        >
          {item?.step >= 7 ? (
            <IconEkycSuccess />
          ) : item?.step <= 5 ? (
            <IconEkycDisable />
          ) : (
            <IconEkyc />
          )}

          <MText
            style={{
              textAlign: 'center',
              fontSize: 10,
              marginTop: 5,
              color: '#333333',
            }}
          >
            EKYC
          </MText>
        </TouchableOpacity>
        <TouchableOpacity
          disabled={item?.step === 7 ? false : true}
          style={$action}
          onPress={() => {
            navigation.push(ScreenNames.TTSSignLoan, {
              loan: item,
            });
          }}
        >
          {item?.step <= 6 ? (
            <IconSignDisable />
          ) : item?.step === 8 ? (
            <IconSignSuccess />
          ) : (
            <IconSign2 />
          )}
          <MText
            style={{
              textAlign: 'center',
              fontSize: 10,
              marginTop: 5,
              color: '#333333',
            }}
          >
            Ký HĐ
          </MText>
        </TouchableOpacity>
      </View>

      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 8,
          marginTop: 16,
          backgroundColor: item?.step === 8 ? '#E8FFE9' : '#FFF2F2',
          paddingHorizontal: 10,
          paddingVertical: 10,
          borderRadius: 4,
          justifyContent: 'space-between',
        }}
      >
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 8,
            flex: 1,
            paddingRight: 24,
          }}
        >
          {item?.step === 8 ? <IconTick /> : <Info />}
          <MText
            style={{
              color: item?.step === 8 ? '#28A745' : '#E40010',
              fontSize: 10,
            }}
          >
            {item?.step < 3
              ? 'OCR chứng từ để được giải ngân'
              : item?.step === 3
              ? `Tiếp tục Cập nhật thông tin để${'\n'}giải ngân nhanh nhất`
              : item?.step === 6 || item?.step === 7
              ? `Tiếp tục eKYC và Ký hợp đồng để${'\n'}giải ngân nhanh nhất`
              : item?.step === 8
              ? `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 < 3 ? (
          <TouchableOpacity
            onPress={() => {
              if (item?.step === 0) {
                navigation.push(ScreenNames.OCR, {
                  loan: item,
                  front: true,
                });
              } else if (item?.step === 1) {
                navigation.push(ScreenNames.VehicleCamera, {
                  loan: item,
                  front: true,
                });
              } else if (item?.step === 2) {
                navigation.push(ScreenNames.RegisterCamera, {
                  loan: item,
                });
              }
            }}
          >
            <LinearGradient
              colors={['#FF8E4F', '#EF592E']}
              style={{
                height: 24,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 24,
                paddingHorizontal: 10,
              }}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 10,
                }}
              >
                Đi tới OCR
              </MText>
            </LinearGradient>
          </TouchableOpacity>
        ) : item?.step === 3 ? (
          <TouchableOpacity
            onPress={() => {
              if (item?.step === 3) {
                if (item?.typeLoan === 5) {
                  navigation.push(ScreenNames.ReviewInformation, {
                    loan: item,
                  });
                } else if (item?.typeLoan === 6) {
                  navigation.push(ScreenNames.TopupLoanInfo, {
                    loan: item,
                  });
                }
              }
            }}
          >
            <LinearGradient
              colors={['#FF8E4F', '#EF592E']}
              style={{
                height: 24,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 24,
                paddingHorizontal: 10,
              }}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 10,
                }}
              >
                Cập nhật thông tin
              </MText>
            </LinearGradient>
          </TouchableOpacity>
        ) : item?.step === 6 ? (
          <TouchableOpacity
            onPress={() => {
              navigation.push(ScreenNames.LivenessV2, {
                loan: item,
              });
            }}
          >
            <LinearGradient
              colors={['#FF8E4F', '#EF592E']}
              style={{
                height: 24,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 24,
                paddingHorizontal: 10,
              }}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 10,
                }}
              >
                Đi tới EKYC
              </MText>
            </LinearGradient>
          </TouchableOpacity>
        ) : item?.step === 7 ? (
          <TouchableOpacity
            onPress={() => {
              navigation.push(ScreenNames.TTSSignLoan, {
                loan: item,
              });
            }}
          >
            <LinearGradient
              colors={['#FF8E4F', '#EF592E']}
              style={{
                height: 24,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 24,
                paddingHorizontal: 10,
              }}
            >
              <MText
                style={{
                  color: 'white',
                  fontSize: 10,
                }}
              >
                Ký hợp đồng
              </MText>
            </LinearGradient>
          </TouchableOpacity>
        ) : (
          <></>
        )}
      </View>

      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginTop: 16,
        }}
      >
        <MText
          style={{
            color: '#878787',
            fontSize: 12,
          }}
        >
          Trạng thái
        </MText>
        <MText
          style={[
            commonStyles.textNormalBold,
            { color: '#333333', fontSize: 12 },
          ]}
        >
          {item?.loanStatus}
        </MText>
      </View>
      <View
        style={{
          height: 1,
          backgroundColor: '#E0E0E0',
          marginTop: 16,
        }}
      />
      {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,
            borderBottomRightRadius: 8,
            borderBottomLeftRadius: 8,
            marginTop: 10,
          }}
        >
          <MText
            style={[
              {
                fontSize: 12,
                color: '#2F80ED',
              },
            ]}
          >
            Bảng biểu lãi phí đơn vay {`->`}
          </MText>
        </TouchableOpacity>
      )}
    </View>
  );
}
