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

export const useModalBrowseBank = ({ onSelected }: { onSelected?: (bank: Bank) => void }) => {
    const [showModal, setShowModal] = useState(false);

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

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

    const bank = useBank();

    const column: Column<Bank>[] = useMemo(
        () => [
            {
                label: 'Nama Bank',
                width: 250,
                value: (data: Bank) => data.nama,
            },
            {
                label: 'Alamat',
                value: (data: Bank) => data.alamat,
            },
            {
                label: <center>No. Telp</center>,
                width: 100,
                align: 'center',
                value: (data: Bank) => data.nomor_telp,
            },
            {
                label: <center></center>,
                width: 80,
                align: 'center',
                value: (data: Bank) => (
                    <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">
                <Modal.Header closeButton>
                    <Modal.Title>Daftar Bank</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <DataTable data={bank.data ?? []} column={column} search pagination item_per_page={15} loading={bank.isLoading} />
                </Modal.Body>
                <Modal.Footer>
                    <button className="btn btn-primary" onClick={close}>
                        Tutup
                    </button>
                </Modal.Footer>
            </Modal>
        );
    }, [bank.data, bank.isLoading, column, showModal]);

    return { modal, open, close };
};