import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { SelectProdukTabungan } from '@/components/costum/SelectProdukTabungan';
import { ProdukTabungan, Tabungan } from '@/types';
import { useProdukTabungan, useTabungan } from '@/useQuery/query';
import { Eye, PlusCircle } from 'lucide-react';
import { useState } from 'react';
import { Link } from 'react-router';
import { useModalDetailTabungan } from './modalDetailTabungan';

export default function TabunganPage() {
    const tabungan = useTabungan();

    const column: Column<Tabungan>[] = [
        {
            label: <center>Rekening</center>,
            width: 120,
            align: 'center',
            value: (data: Tabungan) => data.rekening,
        },
        {
            label: <center>Produk</center>,
            align: 'center',
            width: 200,
            value: (data: Tabungan) => data.produk?.nama,
        },
        {
            label: 'Nama Anggota',
            value: (data: Tabungan) => data.anggota?.nama_lengkap,
        },
        {
            label: 'Alamat',
            value: (data: Tabungan) => data.anggota?.alamat,
        },
        // {
        //     label: <center></center>,
        //     width: 80,
        //     align: 'center',
        //     value: (data: Tabungan) => (
        //         <span className="c-pointer" onClick={() => modalDetailTabungan.open(data.rekening)}>
        //             <Eye size={18} />
        //         </span>
        //     ),
        // },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: Tabungan) => (
                <Link to={`/app/master/tabungan/${data.rekening}`} className="c-pointer">
                    <Eye size={18} />
                </Link>
            ),
        },
    ];

    const [selectedProduk, setSelectedProduk] = useState<ProdukTabungan | undefined>(undefined);
    const produks = useProdukTabungan();

    const modalDetailTabungan = useModalDetailTabungan({
        onSubmit: async () => {
            await tabungan.refetch();
            return true;
        },
    });

    return (
        <div className="container">
            <PageHeader
                title="Data Tabungan"
                breadcrumb={[
                    {
                        title: 'Master',
                        path: '/app/master',
                    },
                    {
                        title: 'Tabungan',
                        path: '/app/master/tabungan',
                    },
                ]}
            />
            <DataTable
                data={
                    tabungan.data?.filter((Item: Tabungan) => {
                        if (!selectedProduk) return true;
                        return Item.produk?.id === selectedProduk.id;
                    }) ?? []
                }
                column={column}
                search
                pagination
                loading={tabungan.isLoading}
                item_per_page={15}
                buttons={
                    <div className="d-flex gap-2 align-items-center">
                        <div style={{ width: 300 }}>
                            <SelectProdukTabungan
                                value={selectedProduk?.id?.toString()}
                                onChange={(e) => {
                                    const prod = produks.data?.find((item: ProdukTabungan) => item.id == parseInt(e));
                                    setSelectedProduk(prod);
                                }}
                            />
                        </div>
                        <button className="btn btn-primary d-flex gap-2 align-items-center" onClick={() => modalDetailTabungan.open()}>
                            <PlusCircle size={18} />
                            Tambah Tabungan
                        </button>
                        {/* <Link to={'/app/master/tabungan/add'} className="btn btn-primary d-flex gap-2 align-items-center">
                            <PlusCircle size={18} />
                            Tambah Tabungan
                        </Link> */}
                    </div>
                }
            />
            {modalDetailTabungan.modal}
        </div>
    );
}