import { ProdukTabungan } 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';

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

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

    const open = (prod?: ProdukTabungan) => {
        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 Tabungan</h5>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="row mb-2">
                            <label className="col-form-label col-md-3">Nama Produk</label>
                            <div className="col-md-9">
                                <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-3">Administrasi Bulanan</label>
                            <div className="col-md-4">
                                <div className="input-group">
                                    <span className="input-group-text bg-white border-end-0">Rp</span>
                                    <NumericFormat
                                        className="form-control border-start-0 text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        value={produk?.admin_bulanan || '0'}
                                        onValueChange={(e) => setProduk({ ...produk, admin_bulanan: parseInt(e.value) })}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="row mb-2">
                            <label className="col-form-label col-md-3">Saldo Minimal</label>
                            <div className="col-md-4">
                                <div className="input-group">
                                    <span className="input-group-text bg-white border-end-0">Rp</span>
                                    <NumericFormat
                                        className="form-control border-start-0 text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        value={produk?.saldo_minimal || '0'}
                                        onValueChange={(e) => setProduk({ ...produk, saldo_minimal: parseInt(e.value) })}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="row mb-2">
                            <label className="col-form-label col-md-3">Suku Bunga / Tahun</label>
                            <div className="col-md-3">
                                <div className="input-group">
                                    <NumericFormat
                                        className="form-control border-end-0"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        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-3">Akun Jurnal</label>
                                <div className="col-md-5">
                                    <div className="input-group">
                                        <input className="form-control" placeholder="Akun" readOnly value={produk?.akun_simpanan?.kode_akun ?? ''} />
                                        <button
                                            className="btn btn-primary"
                                            onClick={() => {
                                                modalBrowseAkun.open('jurnal');
                                            }}
                                        >
                                            Browse
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div id="data-anggota">
                                <div className="form-group row mb-2">
                                    <label className="col-form-label col-md-3"></label>
                                    <div className="col-md-9">
                                        <input
                                            className="form-control"
                                            placeholder="Nama Akun Jurnal"
                                            readOnly
                                            value={produk?.akun_simpanan?.nama ?? ''}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">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 id="data-anggota">
                                <div className="form-group row mb-2">
                                    <label className="col-form-label col-md-3"></label>
                                    <div className="col-md-9">
                                        <input
                                            className="form-control"
                                            placeholder="Nama Akun Biaya Bunga"
                                            readOnly
                                            value={produk?.akun_biaya_bunga?.nama ?? ''}
                                        />
                                    </div>
                                </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 };
};