import { saveBank } from '@/api/api_penempatan_bank';
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 { useModalBank } from '@/components/modal/modalBank';
import { Bank } from '@/types';
import { useBank } from '@/useQuery/query';
import { usePage } from '@inertiajs/react';
import { Eye, PlusCircle } from 'lucide-react';

export default function SetupBank() {
    const { token } = usePage().props;
    const banks = useBank();

    const modalBank = useModalBank({
        onSubmit: async (bank) => {
            const response = await saveBank(bank!, token as string);
            const data = await response.json();
            if (response.status == 200 || response.status == 201) {
                banks.refetch();
                await alertSuccess('Bank berhasil disimpan');
                return true;
            } else {
                await alertError(data.message);
                return false;
            }
        },
    });

    const column: Column<Bank>[] = [
        {
            label: 'Nama Bank',
            // width: 250,
            value: (data: Bank) => data.nama,
        },
        {
            label: 'Alamat',
            value: (data: Bank) => data.alamat,
        },
        {
            label: <center>No. Telp</center>,
            width: 200,
            align: 'center',
            value: (data: Bank) => data.nomor_telp,
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: Bank) => (
                <span onClick={() => modalBank.open(data)} className="c-pointer">
                    <Eye size={18} />
                </span>
            ),
        },
    ];

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