import { saveProdukTabungan } from '@/api/api_tabungan';
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 { useModalProdukTabungan } from '@/components/modal/modalProdukTabungan';
import { formatNumber } from '@/helper';
import { ProdukTabungan } from '@/types';
import { useProdukTabungan } from '@/useQuery/query';
import { usePage } from '@inertiajs/react';
import { Eye, PlusCircle } from 'lucide-react';

export default function SetupProdukTabungan() {
    const { token } = usePage().props;
    const produks = useProdukTabungan();

    const modalProduk = useModalProdukTabungan({
        onSubmit: async (prod) => {
            const response = await saveProdukTabungan(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<ProdukTabungan>[] = [
        {
            label: 'Nama Produk',
            value: (data: ProdukTabungan) => data.nama,
        },
        {
            label: <center>Suku Bunga</center>,
            width: 150,
            align: 'center',
            value: (data: ProdukTabungan) => formatNumber(data.suku_bunga),
        },
        {
            label: <center>Admin Bulanan</center>,
            width: 150,
            align: 'center',
            value: (data: ProdukTabungan) => formatNumber(data.admin_bulanan),
        },
        {
            label: <center>Admin Pasif</center>,
            width: 150,
            align: 'center',
            value: (data: ProdukTabungan) => formatNumber(data.admin_pasif),
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: ProdukTabungan) => (
                <span onClick={() => modalProduk.open(data)} className="c-pointer">
                    <Eye size={18} />
                </span>
            ),
        },
    ];

    return (
        <>
            <div className="container">
                <PageHeader
                    title="Data Produk Tabungan"
                    breadcrumb={[
                        {
                            title: 'Pengaturan',
                            path: '/app/pengaturan',
                        },
                        {
                            title: 'Produk',
                            path: '/app/pengaturan/produk',
                        },
                        {
                            title: 'Tabungan',
                            path: '/app/pengatuan/produk/tabungan',
                        },
                    ]}
                />
                <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}
        </>
    );
}
