/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from '../../Deposits/Fiat/fiat.module.scss';
import { useForm } from '@inertiajs/react';
import { useState } from 'react';
import { router } from '@inertiajs/react';


const FiatWithdrawal = ({ loggedInUser }: any) => {
  const { data, setData } = useForm({
    amount: '',
    bankName: '',
    accountName: '',
    accountNumber: '',
  });

  const { walletBalance } = loggedInUser

  const [paymentSummary, setPaymentSummary] = useState(false);

  interface formatNumberProps {
  [key: string]: any;
}

const formatNumber = (value: formatNumberProps) => {
    const numeric = value.replace(/[^0-9.]/g, '');
    if (numeric === '') return '';
    const parts = numeric.split('.');
    const whole = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.length > 1 ? `${whole}.${parts[1]}` : whole;
  };

  interface handleAmountChangeProps {
  [key: string]: any;
}

const handleAmountChange = (e: handleAmountChangeProps) => {
    const formatted = formatNumber(e.target.value);
    setData('amount', formatted);
  };


const handleSubmit = () => {
    const numericAmount = parseFloat(data.amount.replace(/,/g, ''));
    router.post(`/transactions`, {
      amount: numericAmount,
      method: 'fiat',
      channel: 'USD',
      type: 'debit',
      category: 'withdrawal',
      status: 'pending',
    });
  };

const togglePaymentSummaryModal = () => {
    if (
      data.accountNumber === '' ||
      data.bankName === '' ||
      data.accountName === '' ||
      data.amount === ''
    ) {
      alert('Please completely fill the form first');
    } else {
      handleSubmit();
      setPaymentSummary(!paymentSummary);
    }
  };

  return (
    <div className={styles['fiat']}>
      <div className={styles['fiat__header']}>
        <h2>Withdraw Fiat</h2>
        <p>
          Transaction completion rate depends on your settlement of your partner bank.
        </p>
      </div>

      <div className={styles['fiat__form']}>
        <div style={{ marginBottom: '1rem' }}>
          <label htmlFor="amount">Amount to withdraw *</label>
          <input
            type="text"
            value={data.amount}
            placeholder="Please enter amount to withdraw"
            onChange={handleAmountChange}
          />
        </div>

        <div className={styles['fiat__form--summary']}>
          <div>
            <h6>Wallet Balance: ${ Number(walletBalance).toLocaleString("en-US") }</h6>
          </div>
        </div>

        <div style={{ marginBottom: '1rem' }}>
          <label htmlFor="bank-name">Bank name *</label>
          <input
            type="text"
            value={data.bankName}
            placeholder="Please enter bank name"
            onChange={(e) => setData('bankName', e.target.value)}
          />
        </div>

        <div style={{ marginBottom: '1rem' }}>
          <label htmlFor="account-name">Account name *</label>
          <input
            type="text"
            value={data.accountName}
            placeholder="Please enter your account name"
            onChange={(e) => setData('accountName', e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="account-number">Account number *</label>
          <input
            type="number"
            value={data.accountNumber}
            placeholder="Please enter your account number"
            onChange={(e) => setData('accountNumber', e.target.value)}
          />
        </div><br />

        <small>
          By clicking on the proceed button, you agree to our terms and conditions
        </small>
        <button onClick={togglePaymentSummaryModal}>Proceed To Withdraw</button>
      </div>
    </div>
  );
};

export default FiatWithdrawal;