import { saveProdukDeposito } from '@/api/api_deposito';
import { alertError, alertSuccess } from '@/components/costum/alert';
import { ButtonSubmit } from '@/components/costum/button_submit';
import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { useModalProdukDeposito } from '@/components/modal/modalProdukDeposito';
import { formatNumber } from '@/helper';
import { ProdukDeposito } from '@/types';
import { useProdukDeposito } from '@/useQuery/query';
import { usePage } from '@inertiajs/react';
import { Eye, PlusCircle } from 'lucide-react';

export default function SetupProdukDeposito() {
    const { token } = usePage().props;
    const produks = useProdukDeposito();

    const modalProduk = useModalProdukDeposito({
        onSubmit: async (prod) => {
            console.log(prod);
            const response = await saveProdukDeposito(prod, token as string);
            const data = await response.json();
            if (response.status == 200 || response.status == 201) {
                produks.refetch();
                await alertSuccess('Produk berhasil disimpan');
                return true;
            } else {
                await alertError(data.message);
                return false;
            }
        },
    });

    const column: Column<ProdukDeposito>[] = [
        {
            label: 'Nama Produk',
            value: (data: ProdukDeposito) => data.nama,
        },
        {
            label: <center>Bunga / Tahun (%)</center>,
            width: 150,
            align: 'center',
            value: (data: ProdukDeposito) => formatNumber(data.suku_bunga),
        },
        {
            label: <center>Jkw (Bulan)</center>,
            width: 100,
            align: 'center',
            value: (data: ProdukDeposito) => formatNumber(data.jkw),
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: ProdukDeposito) => (
                <span onClick={() => modalProduk.open(data)} className="c-pointer">
                    <Eye size={18} />
                </span>
            ),
        },
    ];

    return (
        <>
            <div className="container">
                <PageHeader
                    title="Data Produk Deposito"
                    breadcrumb={[
                        {
                            title: 'Pengaturan',
                            path: '/app/pengaturan',
                        },
                        {
                            title: 'Produk',
                            path: '/app/pengaturan/produk',
                        },
                        {
                            title: 'Deposito',
                            path: '/app/pengaturan/produk/deposito',
                        },
                    ]}
                />
                <DataTable
                    data={produks.data ?? []}
                    column={column}
                    search
                    pagination
                    item_per_page={15}
                    buttons={
                        <ButtonSubmit className="btn btn-primary" onClick={modalProduk.open} icon={<PlusCircle size={18} />}>
                            Tambah Produk
                        </ButtonSubmit>
                    }
                />
            </div>
            {modalProduk.modal}
        </>
    );
}