import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { useModalAddKas } from '@/components/modal/modalAddKas';
import { useModalAddPenempatanBank } from '@/components/modal/modalAddPenempatanBank';
import { formatDate } from '@/helper';
import { Kas, PenempatanBank } from '@/types';
import { useKas, 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 KasPage() {
    const penempatanBank = usePenempatanBank();
    const kas = useKas();

    const modalPenempatan = useModalAddPenempatanBank({
        onSubmit: () => {
            penempatanBank.refetch();
            return true;
        },
    });

    const modalKas = useModalAddKas({
        onSubmit: () => {
            kas.refetch();
            return true;
        },
    });

    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>,
            value: (data: PenempatanBank) => data.nama,
        },
        {
            label: 'Bank',
            value: (data: PenempatanBank) => data.bank?.nama,
        },
        {
            label: <center>Tanggal Buka</center>,
            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<Kas>[] = [
        {
            label: <center>ID</center>,
            width: 100,
            align: 'center',
            value: (data: Kas) => data.id,
        },
        {
            label: <center>Jurnal</center>,
            align: 'center',
            width: 150,
            value: (data: Kas) => data.jurnal?.kode_akun,
        },
        {
            label: <center>Nama Kas</center>,
            value: (data: Kas) => data.nama,
        },
        {
            label: <center>Default</center>,
            width: 80,
            align: 'center',
            value: (data: Kas) => (data.is_default ? '✅' : ''),
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: Kas) => (
                <Link to={`/app/master/kas/${data.id}`}>
                    <Eye size={18} />
                </Link>
            ),
        },
    ];

    return (
        <>
            <div className="container">
                <PageHeader
                    title="Data Kas"
                    breadcrumb={[
                        {
                            title: 'Master',
                            path: '/app/master',
                        },
                        {
                            title: 'Kas',
                            path: '/app/master/kas',
                        },
                    ]}
                />

                <DataTable
                    data={kas.data ?? []}
                    column={columnKas}
                    pagination
                    item_per_page={5}
                    search
                    buttons={
                        <button className="btn btn-primary d-flex gap-2 align-items-center" onClick={() => modalKas.open()}>
                            <PlusCircle size={18} />
                            Tambah Kas
                        </button>
                    }
                />

                <hr style={{ paddingBottom: 1, marginTop: 1 }} />

                <DataTable
                    data={penempatanBank.data ?? []}
                    column={columnPenempatan}
                    pagination
                    item_per_page={5}
                    search
                    buttons={
                        <button className="btn btn-primary d-flex gap-2 align-items-center" onClick={() => modalPenempatan.open()}>
                            <PlusCircle size={18} />
                            Tambah Penempatan Bank
                        </button>
                    }
                />
            </div>
            {modalPenempatan.modal}
            {modalKas.modal}
        </>
    );
}