// @ts-nocheck
import { observer } from 'mobx-react-lite';
import React from 'react';
import {
  Clipboard,
  SafeAreaView,
  ScrollView,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { commonStyles } from '../CommonStyles';
import { useNavigation } from '@react-navigation/native';
import { IconBack, IconCopy } from '../../assets/icons';
import { color } from '../../theme';
import { MText } from '../../components/MText';
import LinearGradient from 'react-native-linear-gradient';
import { formatMoney } from '../../utils';
import MHeader from '../../components/MHeader';

export const QrPayment = observer(function QrPayment(props: any) {
  const navigation = useNavigation();
  const [totalMoney, setTotalMoney] = React.useState(
    props.route.params.item?.payMoney || 0
  );

  return (
    <View style={{ flex: 1, backgroundColor: 'rgba(244, 244, 244, 1)' }}>
      <MHeader
        title={`Tạo mã QR để thanh toán`}
        onBack={() => navigation.goBack()}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView>
          <View
            style={{
              backgroundColor: 'white',
              margin: 16,
              borderRadius: 16,
              padding: 16,
            }}
          >
            <MText
              style={{
                fontWeight: '600',
                fontSize: 16,
                color: 'rgba(61, 61, 61, 1)',
              }}
            >
              Kỳ thanh toán
            </MText>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderColor: 'rgba(229, 229, 234, 1)',
                height: 40,
                borderRadius: 8,
                flexDirection: 'row',
                alignItems: 'center',
                paddingHorizontal: 16,
                marginTop: 8,
              }}
            >
              <MText
                style={{
                  fontSize: 16,
                }}
              >
                Kỳ hiện tại
              </MText>
            </TouchableOpacity>
            <MText
              style={{
                fontWeight: '600',
                fontSize: 16,
                color: 'rgba(61, 61, 61, 1)',
                marginTop: 16,
              }}
            >
              Số tiền
            </MText>
            <TextInput
              value={formatMoney(totalMoney)}
              style={{
                height: 40,
                borderWidth: 1,
                borderColor: 'rgba(229, 229, 234, 1)',
                borderRadius: 8,
                paddingHorizontal: 16,
                marginTop: 8,
                fontSize: 16,
                color: '#333333',
              }}
              onChangeText={(text) => {
                const numericValue = text.replace(/\D/g, '');
                setTotalMoney(numericValue);
              }}
              keyboardType="number-pad"
            />
            <View
              style={{
                height: 1,
                backgroundColor: 'rgba(229, 229, 234, 1)',
                marginVertical: 16,
              }}
            />
            <MText
              style={{
                fontWeight: '600',
              }}
            >
              Thông tin ngân hàng thanh toán của Tima
            </MText>
            <MText
              style={{
                color: 'rgba(130, 130, 130, 1)',
                fontSize: 12,
                marginTop: 4,
              }}
            >
              * Lưu ý: Chỉ chuyển khoản khi hiển thị mã QR đúng với thông tin
              của số tài khoản dưới đây
            </MText>
            <View
              style={{
                backgroundColor: 'rgba(255, 243, 233, 1)',
                padding: 8,
                borderRadius: 8,
                marginTop: 8,
              }}
            >
              <MText
                style={{
                  color: 'rgba(51, 51, 51, 1)',
                  fontSize: 12,
                }}
              >
                Số tài khoản
              </MText>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                }}
              >
                <MText
                  style={{
                    color: 'rgba(61, 61, 61, 1)',
                    fontWeight: '600',
                  }}
                >
                  {props.route.params?.data?.accountNumber}
                </MText>
                <TouchableOpacity
                  onPress={() =>
                    Clipboard.setString(props.route.params?.data?.accountNumber)
                  }
                >
                  <IconCopy />
                </TouchableOpacity>
              </View>
              <MText
                style={{
                  color: 'rgba(51, 51, 51, 1)',
                  fontSize: 12,
                  marginTop: 5,
                }}
              >
                Tên tài khoản thụ hưởng
              </MText>
              <MText
                style={{
                  color: 'rgba(61, 61, 61, 1)',
                  fontWeight: '600',
                }}
              >
                {props.route.params?.data?.accountName}
              </MText>
              <MText
                style={{
                  color: 'rgba(51, 51, 51, 1)',
                  fontSize: 12,
                  marginTop: 5,
                }}
              >
                Ngân hàng
              </MText>
              <MText
                style={{
                  color: 'rgba(61, 61, 61, 1)',
                  fontWeight: '600',
                }}
              >
                {props.route.params?.data?.bankName}
              </MText>
            </View>
          </View>
        </ScrollView>
        <LinearGradient
          style={{
            borderRadius: 24,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
            marginVertical: 24,
            marginHorizontal: 16,
          }}
          colors={['#FF7A00', '#EF4123']}
        >
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('ShowQrCode', {
                amount: totalMoney,
                ...props.route.params,
                id: props?.route?.params?.id,
              })
            }
          >
            <MText style={{ color: 'white', fontSize: 16, fontWeight: '600' }}>
              Tiếp tục & Nhận mã QR thanh toán
            </MText>
          </TouchableOpacity>
        </LinearGradient>
      </SafeAreaView>
    </View>
  );
});
