//@ts-nocheck
import { useNavigation } from '@react-navigation/native';
import React from 'react';
import {
  Image,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import { CIMBBank, IconBack } from '../../assets/icons';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { color } from '../../theme';
import { commonStyles } from '../CommonStyles';
import MHeader from '../../components/MHeader';

const $backButton: ViewStyle = {
  position: 'absolute',
  left: 16,
};

const $header: ViewStyle = {
  flexDirection: 'row',
  alignItems: 'center',
  paddingVertical: 16,
  justifyContent: 'center',
};

export default function TransferDetail(props: any) {
  const navigation = useNavigation();

  const renderStep = (step) => {
    switch (step) {
      case 1:
        return (
          <View style={{ paddingHorizontal: 16 }}>
            <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
              Chọn mục{' '}
              <MText style={commonStyles.textNormalBold}>“Chuyển tiền”</MText> ở
              ngân hàng của bạn
            </MText>
            <Image
              source={require('./step1.png')}
              style={{
                width: '100%',
                marginVertical: 8,
                resizeMode: 'contain',
              }}
            />
          </View>
        );
      case 2:
        return (
          <View style={{ paddingHorizontal: 16 }}>
            <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
              Chọn ngân hàng nhận{' '}
              <MText style={commonStyles.textNormalBold}>Techcombank</MText>
            </MText>
            <Image
              source={require('./step2.png')}
              style={{
                width: '100%',
                marginVertical: 8,
                resizeMode: 'contain',
              }}
            />
          </View>
        );
      case 3:
        return (
          <View style={{ paddingHorizontal: 16 }}>
            <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
              Chọn{' '}
              <MText style={commonStyles.textNormalBold}>
                “Chuyển tiền nhanh”
              </MText>
            </MText>
            <Image
              source={require('./step3.png')}
              style={{
                width: '100%',
                marginVertical: 8,
                resizeMode: 'contain',
              }}
            />
          </View>
        );
      case 4:
        return (
          <View style={{ paddingHorizontal: 16 }}>
            <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
              <MText style={commonStyles.textNormalBold}>
                Nhập/ Dán số tài khoản
              </MText>{' '}
              từ Tima
            </MText>
            <Image
              source={require('./step4.png')}
              style={{
                width: '100%',
                marginVertical: 8,
                resizeMode: 'contain',
              }}
            />
          </View>
        );
      case 5:
        return (
          <View style={{ paddingHorizontal: 16 }}>
            <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
              <MText style={commonStyles.textNormalBold}>Nhập số tiền </MText>
              phải trả
            </MText>
            <Image
              source={require('./step5.png')}
              style={{
                width: '100%',
                marginVertical: 8,
                resizeMode: 'contain',
              }}
            />
          </View>
        );
      case 6:
        return (
          <View style={{ paddingHorizontal: 16 }}>
            <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
              Xác nhận thanh toán
            </MText>
            <Image
              source={require('./step6.png')}
              style={{
                width: '100%',
                marginVertical: 8,
                resizeMode: 'contain',
              }}
            />
          </View>
        );
      default:
        return <View style={{ padding: 16 }}></View>;
    }
  };
  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <MHeader title={'Vay trực tuyến 24/7'} />
      <View style={{ flex: 1 }}>
        <View style={$header}>
          <TouchableOpacity
            style={$backButton}
            onPress={() => navigation.goBack()}
          >
            <IconBack />
          </TouchableOpacity>
          <MText
            style={{
              fontSize: 16,
              fontWeight: '600',
              fontFamily: 'BeVietnamPro-SemiBold',
            }}
          >
            {`BƯỚC ${props.route.params.step}`}
          </MText>
        </View>
        <ScrollView>{renderStep(props.route.params.step)}</ScrollView>
      </View>
    </View>
  );
}
