import { formatNumber } from '@/helper';
import { Deposito, Tabungan } from '@/types';
import { useDeposito } from '@/useQuery/query';
import { useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import DataTable, { Column } from '../costum/DataTable';

export const useModalBrowseRekeningDeposito = ({ onSelected }: { onSelected?: (tabungan: Tabungan) => void }) => {
    const [showModal, setShowModal] = useState(false);
    const [status, setStatus] = useState<number>(1);

    const open = (stat: number) => {
        setStatus(stat);
        setShowModal(true);
    };

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

    const column: Column<Deposito>[] = useMemo(
        () => [
            {
                label: <center>Rekening</center>,
                width: 120,
                align: 'center',
                value: (data: Deposito) => data.rekening,
            },
            {
                label: 'Nama Anggota',
                value: (data: Deposito) => data.anggota?.nama_lengkap,
            },
            // {
            //     label: <center>Tgl Valuta</center>,
            //     width: 120,
            //     align: 'center',
            //     value: (data: Deposito) => data.tgl_valuta,
            // },
            {
                label: <center>JKW</center>,
                width: 80,
                align: 'center',
                value: (data: Deposito) => data.jkw,
            },
            // {
            //     label: <center>Tgl Jtuh Tempo</center>,
            //     width: 120,
            //     align: 'center',
            //     value: (data: Deposito) => data.tgl_jatuh_tempo,
            // },
            {
                label: <center>Bunga</center>,
                width: 80,
                align: 'center',
                value: (data: Deposito) => data.produk?.suku_bunga,
            },
            {
                label: <center>Nominal</center>,
                width: 150,
                align: 'right',
                value: (data: Deposito) => formatNumber(data.nilai_valuta),
            },
            // {
            //     label: <center>Status</center>,
            //     width: 80,
            //     align: 'center',
            //     value: (data: Deposito) => data.status,
            // },
            {
                label: <center></center>,
                width: 80,
                align: 'center',
                value: (data: Deposito) => (
                    <span
                        className="badge text-bg-primary c-pointer"
                        onClick={() => {
                            close();
                            onSelected?.(data);
                        }}
                    >
                        Pilih
                    </span>
                ),
            },
        ],
        [onSelected],
    );

    const deposito = useDeposito();

    const modal = useMemo(() => {
        return (
            <Modal show={showModal} onHide={close} size="xl">
                <Modal.Header closeButton>
                    <h5 className="m-0">Daftar Deposito</h5>
                </Modal.Header>
                <Modal.Body>
                    <DataTable
                        data={(deposito.data ?? []).filter((item: Deposito) => item.status == status)}
                        column={column}
                        search
                        pagination
                        item_per_page={10}
                        loading={deposito.isLoading}
                    />
                </Modal.Body>
                <Modal.Footer>
                    <button className="btn btn-primary" onClick={close}>
                        Tutup
                    </button>
                </Modal.Footer>
            </Modal>
        );
    }, [showModal, deposito.data, deposito.isLoading, column, status]);

    return { modal, open, close };
};