import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { useModalDetailAnggota } from '@/pages/master/anggota/modalDetailAnggota';
import { Anggota } from '@/types';
import { useAnggota } from '@/useQuery/query';
import { Eye, PlusCircle } from 'lucide-react';
import 'react-data-grid/lib/styles.css';

export default function AnggotaPage() {
    const anggota = useAnggota();
    const modalAnggota = useModalDetailAnggota({
        onSubmit: async () => {
            await anggota.refetch();
            return true;
        },
    });

    const column: Column<Anggota>[] = [
        {
            label: <center>ID</center>,
            width: 120,
            align: 'center',
            value: (data: Anggota) => data.id,
        },
        {
            label: 'Nama Lengkap',
            value: (data: Anggota) => data.nama_lengkap,
        },
        {
            label: 'Alamat',
            value: (data: Anggota) => data.alamat,
        },
        {
            label: <center>RT</center>,
            width: 80,
            align: 'center',
            value: (data: Anggota) => data.rt,
        },
        {
            label: <center>RW</center>,
            width: 80,
            align: 'center',
            value: (data: Anggota) => data.rw,
        },
        {
            label: 'Kelurahan',
            value: (data: Anggota) => data.kelurahan,
        },
        {
            label: 'Kecamatan',
            value: (data: Anggota) => data.kecamatan,
        },
        {
            label: <center></center>,
            width: 80,
            align: 'center',
            value: (data: Anggota) => (
                <span className="c-pointer" onClick={() => modalAnggota.open(data?.id)}>
                    <Eye size={18} />
                </span>
            ),
        },
        // {
        //     label: <center></center>,
        //     width: 80,
        //     align: 'center',
        //     value: (data: Anggota) => (
        //         <Link to={`/app/master/anggota/${data.id}`}>
        //             <Eye size={18} />
        //         </Link>
        //     ),
        // },
    ];

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