import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { formatNumber } from '@/helper';
import { Deposito } from '@/types';
import { useDeposito } from '@/useQuery/query';
import { Eye, PlusCircle } from 'lucide-react';
import { Link } from 'react-router';
import { useModalDetailDeposito } from './modalDetailDeposito';

const STATUS_DEPOSITO: Record<number, string> = {
    0 : "SETUP",
    1 : "AKTIF",
    3 : "TUTUP",
    9 : "DELETE"
}

export default function DepositoPage() {
    const deposito = useDeposito();

    const modalDetailDeposito = useModalDetailDeposito({
        onSubmit: async () => {
            await deposito.refetch();
            return true;
        },
    });

    const column: Column<Deposito>[] = [
        {
            label: <center>Rekening</center>,
            width: 120,
            align: 'center',
            value: (data: Deposito) => data.rekening,
        },
        {
            label: 'Nama Anggota',
            value: (data: Deposito) => data.anggota?.nama_lengkap,
        },
        {
            label: <center>Tgl Valuta</center>,
            width: 120,
            align: 'center',
            value: (data: Deposito) => data.tgl_valuta,
        },
        {
            label: <center>JKW</center>,
            width: 80,
            align: 'center',
            value: (data: Deposito) => data.jkw,
        },
        {
            label: <center>Tgl Jtuh Tempo</center>,
            width: 120,
            align: 'center',
            value: (data: Deposito) => data.tgl_jatuh_tempo,
        },
        {
            label: <center>Bunga</center>,
            width: 80,
            align: 'center',
            value: (data: Deposito) => data.produk?.suku_bunga,
        },
        {
            label: <center>Nominal</center>,
            width: 150,
            align: 'right',
            value: (data: Deposito) => formatNumber(data.nilai_valuta),
        },
        {
            label: <center>Status</center>,
            width: 80,
            align: 'center',
            value: (data: Deposito) => STATUS_DEPOSITO[data.status ?? 0] ?? '',
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: Deposito) => (
                <Link to={`/app/master/deposito/${data.rekening}`}>
                    <Eye size={18} />
                </Link>
            ),
        },
    ];

    return (
        <div className="container">
            <PageHeader
                title="Data Deposito"
                breadcrumb={[
                    {
                        title: 'Master',
                        path: '/app/master',
                    },
                    {
                        title: 'Deposito',
                        path: '/app/master/deposito',
                    },
                ]}
            />
            <DataTable
                data={deposito.data ?? []}
                column={column}
                search
                pagination
                item_per_page={15}
                loading={deposito.isLoading}
                buttons={
                    <button className="btn btn-primary d-flex gap-2 align-items-center" onClick={() => modalDetailDeposito.open()}>
                        <PlusCircle size={18} />
                        Tambah Deposito
                    </button>
                }
            />
            {modalDetailDeposito.modal}
        </div>
    );
}