import { Container, DataGridInner } from '@/components';
import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
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 TransactionTopup = () => {
  const [form, setForm] = useState({
    topupAmount: '',
    pin: ''
  });
  const { GetData, PostData } = useCallApi();
  const API_URL = apiConfig.transaction;

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    console.log('Submitted Data:', form);

    if (form.pin == '' || form.topupAmount) {
      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
      })
      if (requestTopup?.status == true) {
        toast.success('Success Request Topup')
      } else {
        toast.warning(`${requestTopup?.message}`)
      }
    } catch (error) {
      toast.warning('Failed')
    }
    // TODO: Kirim ke backend atau proses lainnya
  };

  return (
    <>
      <Helmet>
        <title>TPAY | Transaction Topup Request</title>
      </Helmet>
      <TransactionTopupProvider>
        <Container className="mb-7">
          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</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">Topup</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="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
                    <Input
                      id="topupAmount"
                      type="number"
                      value={form.topupAmount}
                      onChange={(e) => setForm({ ...form, topupAmount: 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>
      </TransactionTopupProvider>
    </>
  );
};

export default TransactionTopup;