import { Container, DataGridInner } from '@/components';
import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner';

const TransactionDisbursement = () => {
  const [form, setForm] = useState({
    customerId: '',
    amount: '',
    pin: ''
  });
  const { GetData, PostData } = useCallApi();
  const API_URL = apiConfig.transaction;

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    console.log('Submitted Data:', form);
    if (form.amount == '' || form.customerId == '' || form.pin == '') {
      toast.warning('Please fill in all required fields.')
      return
    }
    try {
      // let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
      //   amount: form.topupAmount,
      //   pin: form.pin
      // })
      // console.log(requestTopup)
      // if (requestTopup?.status == true) {
      //   toast.success('Success Request Topup')
      // } else {
      //   toast.warning(`${requestTopup?.message}`)
      // }
      toast.warning('Failed')
    } catch (error) {
      toast.warning('Failed')
    }
    // TODO: Kirim ke backend atau proses lainnya
  };

  return (
    <>
      <Helmet>
        <title>TPAY | Transaction Disbursement Saldo</title>
      </Helmet>
      <TransactionDisbursementProvider>
        <Container className="mb-7">
          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</h1>
          <Breadcrumbs sx={{ mb: 2 }}>
            <Link underline="none" color="inherit" href="/">
              <span className="text-sm hover:underline">Dashboard</span>
            </Link>
            <Link underline="none" color="inherit">
              <span className="text-sm">Transaction</span>
            </Link>
            <Link underline="none" color="inherit">
              <span className="text-sm">Disbursement Saldo</span>
            </Link>
          </Breadcrumbs>
          <Container className="flex items-center justify-center">
            <div className="card max-w-[750px] w-full">
              <div className="card-body p-10">
                {/* form */}
                <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label htmlFor="customerId">Customer ID</label><span className="text-red-500">*</span>
                  <Input
                    id="customerId"
                    value={form.customerId}
                    onChange={(e) => setForm({ ...form, customerId: e.target.value })}
                  />
                </div>
                <div>
                  <label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
                  <Input
                    id="amount"
                    type="number"
                    value={form.amount}
                    onChange={(e) => setForm({ ...form, amount: e.target.value })}
                  />
                </div>
                <div>
                  <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
                  <Input
                    id="pin"
                    type="password"
                    value={form.pin}
                    onChange={(e) => setForm({ ...form, pin: e.target.value })}
                  />
                </div>
                <div>
                  <Button type="submit">Submit</Button>
                </div>
              </form>
              </div>
            </div>
          </Container>
        </Container>
      </TransactionDisbursementProvider>
    </>
  );
};

export default TransactionDisbursement;