import { ProdukDeposito } from '@/types';
import { Save } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import { NumericFormat } from 'react-number-format';
import { ButtonSubmit } from '../costum/button_submit';
import { useModalBrowseAkun } from './modalBrowseAkun';
// import { useModalBrowseAkun } from './modalBrowseAkun';

export const useModalProdukDeposito = ({ onSubmit }: { onSubmit?: (prod: ProdukDeposito) => boolean | Promise<boolean> }) => {
    const [showModal, setShowModal] = useState(false);
    const [produk, setProduk] = useState<ProdukDeposito>();

    const modalBrowseAkun = useModalBrowseAkun({
        onSelected: ({ akun, selector }) => {
            if (selector == 'jurnal') {
                setProduk({ ...produk, akun_jurnal: akun, akun_jurnal_id: akun.kode_akun });
            }
            if (selector == 'biaya') {
                setProduk({ ...produk, akun_biaya_bunga: akun, akun_biaya_bunga_id: akun.kode_akun });
            }
        },
    });

    const open = (prod?: ProdukDeposito) => {
        if (prod) {
            console.log(prod);
            setProduk(prod);
        }
        setShowModal(true);
    };

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

    const clear = () => {
        setProduk(undefined);
    };

    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setProduk((prev) => ({
            ...prev,
            [e.target.name]: e.target.value.toUpperCase(),
        }));
    }, []);

    const modal = useMemo(() => {
        return (
            <>
                <Modal show={showModal} onHide={close} onExited={clear} size="lg">
                    <Modal.Header closeButton>
                        <h5 className="m-0">Data Deposito</h5>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="row mb-2">
                            <label className="col-form-label col-md-4">Nama Produk</label>
                            <div className="col-md-8">
                                <input
                                    className="form-control"
                                    placeholder="Nama Produk"
                                    name="nama"
                                    value={produk?.nama || ''}
                                    onChange={handleChange}
                                />
                            </div>
                        </div>
                        <div className="row mb-2">
                            <label className="col-form-label col-md-4">Jangka Waktu</label>
                            <div className="col-md-4">
                                <input className="form-control" type="number" min={1} name="jkw" value={produk?.jkw || '0'} onChange={handleChange} />
                            </div>
                        </div>
                        <div className="row mb-2">
                            <label className="col-form-label col-md-4">Suku Bunga / Tahun</label>
                            <div className="col-md-4">
                                <div className="input-group">
                                    <NumericFormat
                                        className="form-control border-end-0"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        min={0}
                                        value={produk?.suku_bunga || '0'}
                                        onValueChange={(e) => setProduk({ ...produk, suku_bunga: parseInt(e.value) })}
                                    />
                                    <span className="input-group-text bg-white">%</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <hr className="mt-3" />
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-4">Akun Jurnal</label>
                                <div className="col-md-5">
                                    <div className="input-group">
                                        <input className="form-control" placeholder="Akun" readOnly value={produk?.akun_jurnal?.kode_akun ?? ''} />
                                        <button
                                            className="btn btn-primary"
                                            onClick={() => {
                                                modalBrowseAkun.open('jurnal');
                                            }}
                                        >
                                            Browse
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-4"></label>
                                <div className="col-md-8">
                                    <input className="form-control" placeholder="Nama Akun Jurnal" readOnly value={produk?.akun_jurnal?.nama ?? ''} />
                                </div>
                            </div>
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-4">Akun Biaya Bunga</label>
                                <div className="col-md-5">
                                    <div className="input-group">
                                        <input
                                            className="form-control"
                                            placeholder="Akun"
                                            readOnly
                                            value={produk?.akun_biaya_bunga?.kode_akun ?? ''}
                                        />
                                        <button
                                            className="btn btn-primary"
                                            onClick={() => {
                                                modalBrowseAkun.open('biaya');
                                            }}
                                        >
                                            Browse
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-4"></label>
                                <div className="col-md-8">
                                    <input
                                        className="form-control"
                                        placeholder="Nama Akun Biaya Bunga"
                                        readOnly
                                        value={produk?.akun_biaya_bunga?.nama ?? ''}
                                    />
                                </div>
                            </div>
                        </div>
                    </Modal.Body>
                    <Modal.Footer>
                        <button className="btn btn-primary" onClick={close}>
                            Tutup
                        </button>
                        <ButtonSubmit
                            disable={!produk}
                            className="btn-success"
                            icon={<Save size={18} />}
                            onClick={async () => {
                                if (onSubmit && produk) {
                                    const save: boolean = await onSubmit(produk);
                                    if (save) {
                                        close();
                                    }
                                }
                            }}
                        >
                            Simpan
                        </ButtonSubmit>
                    </Modal.Footer>
                </Modal>
                {modalBrowseAkun.modal}
            </>
        );
    }, [showModal, produk, handleChange, modalBrowseAkun, onSubmit]);

    return { modal, open, close };
};