import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { formatDate } from '@/helper';
import { PenempatanBank } from '@/types';
import { usePenempatanBank } from '@/useQuery/query';
import { Eye, PlusCircle } from 'lucide-react';
import 'react-data-grid/lib/styles.css';
import { Link } from 'react-router';

export default function PenempatanBankPage() {
    const penempatanBank = usePenempatanBank();

    const columnPenempatan: Column<PenempatanBank>[] = [
        {
            label: <center>ID</center>,
            width: 100,
            align: 'center',
            value: (data: PenempatanBank) => data.id,
        },
        {
            label: <center>Rekening</center>,
            width: 120,
            align: 'center',
            value: (data: PenempatanBank) => data.rekening,
        },
        {
            label: <center>Nama Rekening</center>,
            // width: 250,
            value: (data: PenempatanBank) => data.nama,
        },
        {
            label: 'Bank',
            value: (data: PenempatanBank) => data.bank?.nama,
        },
        {
            label: 'Tanggal Buka',
            width: 150,
            align: 'center',
            value: (data: PenempatanBank) => formatDate(data.tgl_penempatan),
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: PenempatanBank) => (
                <Link to={`/app/master/penempatan/${data.id}`}>
                    <Eye size={18} />
                </Link>
            ),
        },
    ];

    const columnKas: Column<PenempatanBank>[] = [
        {
            label: <center>ID</center>,
            width: 100,
            align: 'center',
            value: (data: PenempatanBank) => data.id,
        },
        {
            label: <center>Rekening</center>,
            width: 120,
            align: 'center',
            value: (data: PenempatanBank) => data.rekening,
        },
        {
            label: <center>Nama Rekening</center>,
            align: 'center',
            width: 200,
            value: (data: PenempatanBank) => data.nama,
        },
        {
            label: 'Bank',
            value: (data: PenempatanBank) => data.bank?.nama,
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: PenempatanBank) => (
                <Link to={`/app/master/penempatan/${data.id}`}>
                    <Eye size={18} />
                </Link>
            ),
        },
    ];

    return (
        <div className="container">
            <PageHeader
                title="Data Penempatan Bank"
                breadcrumb={[
                    {
                        title: 'Master',
                        path: '/app/master',
                    },
                    {
                        title: 'Penempatan Bank',
                        path: '/app/master/penempatan',
                    },
                ]}
            />
            <DataTable
                data={penempatanBank.data ?? []}
                column={columnPenempatan}
                search
                pagination={false}
                buttons={
                    <Link to={'/app/master/penempatan/add'} className="btn btn-primary d-flex gap-2 align-items-center">
                        <PlusCircle size={18} />
                        Tambah Penempatan Bank
                    </Link>
                }
            />

            <h4 className="mt-3">Kas Tunai</h4>
            <DataTable
                data={penempatanBank.data ?? []}
                column={columnKas}
                // search
                pagination={false}
                // buttons={
                //     <Link to={'/app/master/penempatan/add'} className="btn btn-primary d-flex gap-2 align-items-center">
                //         <PlusCircle size={18} />
                //         Tambah Penempatan Bank
                //     </Link>
                // }
            />
        </div>
    );
}