//@ts-nocheck
import { StackActions, useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import {
  CIMBBank,
  IconBack,
  Step1Icon,
  Step2Icon,
  Step3Icon,
  Step4Icon,
  Step5Icon,
  Step6Icon,
} from '../../assets/icons';
import MButton from '../../components/MButton';
import { MText } from '../../components/MText';
import { ScreenNames } from '../../navigation';
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 const GuideTransferBank = observer(function GuideTransferBank() {
  const navigation = useNavigation();
  const goDetail = (step) => {
    navigation.dispatch(
      StackActions.push(ScreenNames.TransferDetail, { step })
    );
  };
  return (
    <View style={{ flex: 1, backgroundColor: '#F4F4F4' }}>
      <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',
            }}
          >
            Hướng dẫn chuyển tiền
          </MText>
        </View>

        <ScrollView>
          <View
            style={[styles.box, { flexDirection: 'row', alignItems: 'center' }]}
          >
            <Step1Icon />
            <View style={{ flex: 1, paddingLeft: 16 }}>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { fonSize: 16, color: color.primary },
                ]}
              >
                BƯỚC 1:
              </MText>
              <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>
              <TouchableOpacity
                style={{ marginTop: 4 }}
                onPress={() => goDetail(1)}
              >
                <MText
                  style={[
                    commonStyles.textNormal,
                    {
                      fontSize: 12,
                      color: '#828282',
                      textDecorationLine: 'underline',
                    },
                  ]}
                >
                  Xem ảnh minh hoạ
                </MText>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={[styles.box, { flexDirection: 'row', alignItems: 'center' }]}
          >
            <Step2Icon />
            <View style={{ flex: 1, paddingLeft: 16 }}>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { fonSize: 16, color: color.primary },
                ]}
              >
                BƯỚC 2:
              </MText>
              <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
                Chọn ngân hàng nhận{' '}
                <MText style={commonStyles.textNormalBold}>Techcombank</MText>
              </MText>
              <TouchableOpacity
                style={{ marginTop: 4 }}
                onPress={() => goDetail(2)}
              >
                <MText
                  style={[
                    commonStyles.textNormal,
                    {
                      fontSize: 12,
                      color: '#828282',
                      textDecorationLine: 'underline',
                    },
                  ]}
                >
                  Xem ảnh minh hoạ
                </MText>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={[styles.box, { flexDirection: 'row', alignItems: 'center' }]}
          >
            <Step3Icon />
            <View style={{ flex: 1, paddingLeft: 16 }}>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { fonSize: 16, color: color.primary },
                ]}
              >
                BƯỚC 3:
              </MText>
              <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
                Ưu tiên chọn{' '}
                <MText style={commonStyles.textNormalBold}>
                  “Chuyển tiền nhanh”
                </MText>
              </MText>
              <MText style={{ fontSize: 12, color: '#FF7A00', marginTop: 8 }}>
                Lưu ý:{' '}
                <MText style={{ fontSize: 12, color: '#828282' }}>
                  Nếu khách hàng chọn Chuyển tiền thường, số tiền thanh toán kỳ
                  có thể bị chuyển chậm 01 ngày.
                </MText>
              </MText>
              <TouchableOpacity
                style={{ marginTop: 8 }}
                onPress={() => goDetail(3)}
              >
                <MText
                  style={[
                    commonStyles.textNormal,
                    {
                      fontSize: 12,
                      color: '#828282',
                      textDecorationLine: 'underline',
                    },
                  ]}
                >
                  Xem ảnh minh hoạ
                </MText>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={[styles.box, { flexDirection: 'row', alignItems: 'center' }]}
          >
            <Step4Icon />
            <View style={{ flex: 1, paddingLeft: 16 }}>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { fonSize: 16, color: color.primary },
                ]}
              >
                BƯỚC 4:
              </MText>
              <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
                <MText style={commonStyles.textNormalBold}>
                  Nhập/ Dán số tài khoản
                </MText>{' '}
                từ Tima
              </MText>
              <TouchableOpacity
                style={{ marginTop: 4 }}
                onPress={() => goDetail(4)}
              >
                <MText
                  style={[
                    commonStyles.textNormal,
                    {
                      fontSize: 12,
                      color: '#828282',
                      textDecorationLine: 'underline',
                    },
                  ]}
                >
                  Xem ảnh minh hoạ
                </MText>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={[styles.box, { flexDirection: 'row', alignItems: 'center' }]}
          >
            <Step5Icon />
            <View style={{ flex: 1, paddingLeft: 16 }}>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { fonSize: 16, color: color.primary },
                ]}
              >
                BƯỚC 5:
              </MText>
              <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
                <MText style={commonStyles.textNormalBold}>Nhập số tiền </MText>
                phải trả
              </MText>
              <TouchableOpacity
                style={{ marginTop: 4 }}
                onPress={() => goDetail(5)}
              >
                <MText
                  style={[
                    commonStyles.textNormal,
                    {
                      fontSize: 12,
                      color: '#828282',
                      textDecorationLine: 'underline',
                    },
                  ]}
                >
                  Xem ảnh minh hoạ
                </MText>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={[styles.box, { flexDirection: 'row', alignItems: 'center' }]}
          >
            <Step6Icon />
            <View style={{ flex: 1, paddingLeft: 16 }}>
              <MText
                style={[
                  commonStyles.textNormalBold,
                  { fonSize: 16, color: color.primary },
                ]}
              >
                BƯỚC 6:
              </MText>
              <MText style={[commonStyles.textNormal, { marginTop: 4 }]}>
                Xác nhận thanh toán
              </MText>
              <TouchableOpacity
                style={{ marginTop: 4 }}
                onPress={() => goDetail(6)}
              >
                <MText
                  style={[
                    commonStyles.textNormal,
                    {
                      fontSize: 12,
                      color: '#828282',
                      textDecorationLine: 'underline',
                    },
                  ]}
                >
                  Xem ảnh minh hoạ
                </MText>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  box: {
    backgroundColor: 'white',
    borderRadius: 6,
    padding: 16,
    marginHorizontal: 16,
    marginBottom: 8,
  },
});
