import { Anggota } from '@/types';
import { useAnggota } from '@/useQuery/query';
import { useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import DataTable, { Column } from '../costum/DataTable';

export const useModalBrowseAnggota = ({ onSelected }: { onSelected?: (anggota: Anggota) => void }) => {
    const [showModal, setShowModal] = useState(false);

    const open = () => {
        setShowModal(true);
    };

    const close = () => {
        setShowModal(false);
    };

    const anggota = useAnggota();

    const column: Column<Anggota>[] = useMemo(
        () => [
            {
                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="badge text-bg-primary c-pointer"
                        onClick={() => {
                            close();
                            onSelected?.(data);
                        }}
                    >
                        Pilih
                    </span>
                ),
            },
        ],
        [onSelected],
    );

    const modal = useMemo(() => {
        return (
            <Modal show={showModal} onHide={close} size="xl" scrollable dialogClassName='modal-transparent'>
                <Modal.Header closeButton>
                    <h5 className='m-0'>Daftar Anggota</h5>
                </Modal.Header>
                <Modal.Body>
                    <DataTable data={anggota.data ?? []} column={column} search pagination item_per_page={13} loading={anggota.isLoading} />
                </Modal.Body>
                <Modal.Footer>
                    <button className="btn btn-primary" onClick={close}>
                        Tutup
                    </button>
                </Modal.Footer>
            </Modal>
        );
    }, [anggota.data, anggota.isLoading, column, showModal]);

    return { modal, open, close };
};