import { ProdukTabungan, Tabungan } from '@/types';
import { useProdukTabungan, useTabungan } from '@/useQuery/query';
import { useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import DataTable, { Column } from '../costum/DataTable';
import { SelectProdukTabungan } from '../costum/SelectProdukTabungan';

export const useModalBrowseRekeningTabungan = ({ onSelected }: { onSelected?: (tabungan: Tabungan) => void }) => {
    const [showModal, setShowModal] = useState(false);
    const [selectedProduk, setSelectedProduk] = useState<ProdukTabungan>();
    const produks = useProdukTabungan();

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

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

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

    const tabungan = useTabungan();

    const modal = useMemo(() => {
        return (
            <Modal show={showModal} onHide={close} size="xl">
                <Modal.Header closeButton>
                    <h5 className="m-0">Daftar Tabungan</h5>
                </Modal.Header>
                <Modal.Body>
                    <DataTable
                        data={tabungan.data?.filter((item: Tabungan) => {
                            if (selectedProduk) {
                                return item.produk?.id == selectedProduk.id;
                            }
                            return true;
                        }) ?? []}
                        column={column}
                        search
                        pagination
                        item_per_page={10}
                        loading={tabungan.isLoading}
                        buttons={
                            <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>
                        }
                    />
                </Modal.Body>
                <Modal.Footer>
                    <button className="btn btn-primary" onClick={close}>
                        Tutup
                    </button>
                </Modal.Footer>
            </Modal>
        );
    }, [showModal, tabungan.data, tabungan.isLoading, column, selectedProduk, produks.data]);

    return { modal, open, close };
};