import { saveTransaksiDeposito } from '@/api/api_deposito';
import { SelectTransaksiDeposito } from '@/components/costum/SelectTransaksiDeposito';
import { useModalBrowseRekeningDeposito } from '@/components/modal/modalBrowseRekeningDeposito';
import { useModalBrowseRekeningTabungan } from '@/components/modal/modalBrowseRekeningTabungan';
import { formatDate, formatTanggal, hitungJatuhTempo } from '@/helper';
import { Deposito, Tabungan, TransaksiDeposito } from '@/types';
import { Save, X } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import { NumericFormat } from 'react-number-format';
import { alertError, alertSuccess } from '../../../components/costum/alert';
import { ButtonSubmit } from '../../../components/costum/button_submit';
import { usePage } from '@inertiajs/react';

export const useModalTransaksiDeposito = ({ onSubmit }: { onSubmit?: (trans: TransaksiDeposito) => boolean | Promise<boolean> }) => {
    const { token } = usePage().props;
    const [showModal, setShowModal] = useState(false);
    const [validasi, setValidasi] = useState<boolean>(false);
    const [loading, setLoading] = useState<boolean>(false);

    const open = (data?: TransaksiDeposito) => {
        if (data) {
            setDataTransaksi(data);
        }
        setShowModal(true);
    };

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

    const clear = () => {
        setDataTransaksi({
            trans_tglbuku: formatDate(new Date()),
        });
        setValidasi(false);
        setLoading(false);
    };

    const [dataTransaksi, setDataTransaksi] = useState<TransaksiDeposito>({
        trans_tglbuku: formatDate(new Date()),
        tgl_valuta: formatDate(new Date()),
    });

    const modalRekeningDeposito = useModalBrowseRekeningDeposito({
        onSelected: (dep: Deposito) => {
            setDataTransaksi({ ...dataTransaksi, deposito: dep, nilai_valuta: dep.nilai_valuta, rekening: dep.rekening });
        },
    });

    const modalRekeningTabungan = useModalBrowseRekeningTabungan({
        onSelected: (tab: Tabungan) => {
            setDataTransaksi({ ...dataTransaksi, tabungan: tab, ob_rekening: tab.rekening });
        },
    });

    useEffect(() => {
        if (dataTransaksi.deposito?.produk && dataTransaksi.tgl_valuta) {
            const tgl_jatuh_tempo = hitungJatuhTempo(dataTransaksi.tgl_valuta, dataTransaksi.deposito.produk.jkw!);
            setDataTransaksi((prev) => ({
                ...prev,
                tgl_jatuh_tempo: tgl_jatuh_tempo,
            }));
        }
    }, [dataTransaksi.deposito, dataTransaksi.tgl_valuta]);

    const saveTransaction = useCallback(async () => {
        try {
            setLoading(true);
            console.log(dataTransaksi);
            const response = await saveTransaksiDeposito(dataTransaksi, token as string);
            const responseBody = await response?.json();
            if (response?.status == 200 || response?.status == 201) {
                setValidasi(true);
                if (onSubmit) {
                    const result = await onSubmit(responseBody);
                    if (result === false) {
                        setLoading(false);
                        return;
                    }
                }
                await alertSuccess('Transaksi Berhasil disimpan');
                close();
            } else {
                await alertError(responseBody.message);
            }
        } catch (error) {
            alertError((error as Error).message);
        } finally {
            setLoading(false);
        }
    }, [dataTransaksi, onSubmit, token]);

    const modal = useMemo(() => {
        return (
            <>
                <Modal show={showModal} onHide={close} onExited={clear} size="lg">
                    <Modal.Header closeButton>
                        <h5 className="mb-0">Transaksi Deposito</h5>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="form-group row mb-2">
                            <label className="col-form-label col-md-3">Tanggal</label>
                            <div className="col-md-4">
                                <div className="input-group">
                                    <input
                                        type="date"
                                        className="form-control text-center"
                                        value={dataTransaksi?.trans_tglbuku || ''}
                                        onChange={(e) => {
                                            setDataTransaksi({ ...dataTransaksi, trans_tglbuku: e.target.value });
                                        }}
                                    />
                                </div>
                            </div>
                            <label className="col-form-label col-md-5">
                                <i>{formatTanggal(dataTransaksi?.trans_tglbuku)}</i>
                            </label>
                        </div>
                        <div className="form-group row mb-2">
                            <label className="col-form-label col-md-3">Rekening</label>
                            <div className="col-md-5">
                                <div className="input-group">
                                    <input className="form-control" placeholder="Rekening" readOnly value={dataTransaksi?.deposito?.rekening || ''} />
                                    <button className="btn btn-primary" onClick={() => modalRekeningDeposito.open(0)}>
                                        Browse
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="data-anggota">
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Nama Anggota</label>
                                <div className="col-md-9">
                                    <input
                                        className="form-control"
                                        placeholder="Nama Anggota"
                                        readOnly
                                        value={dataTransaksi?.deposito?.anggota?.nama_lengkap || ''}
                                    />
                                </div>
                            </div>
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Alamat</label>
                                <div className="col-md-9">
                                    <input
                                        className="form-control"
                                        placeholder="Alamat"
                                        readOnly
                                        value={dataTransaksi?.deposito?.anggota?.alamat || ''}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-3" />
                                <div className="col-md-3">
                                    <div className="input-group">
                                        <span className="input-group-text bg-white border-end-0">RT</span>
                                        <input
                                            className="form-control border-start-0 text-center"
                                            readOnly
                                            value={dataTransaksi?.deposito?.anggota?.rt || ''}
                                        />
                                    </div>
                                </div>
                                <div className="col-md-3">
                                    <div className="input-group">
                                        <span className="input-group-text bg-white border-end-0">RW</span>
                                        <input
                                            className="form-control border-start-0 text-center"
                                            readOnly
                                            value={dataTransaksi?.deposito?.anggota?.rw || ''}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div id="data-transaksi">
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Jenis Transaksi</label>
                                <div className="col-md-7">
                                    <SelectTransaksiDeposito
                                        value={dataTransaksi.trans_kode ?? ''}
                                        onChange={(value: string) => {
                                            setDataTransaksi({ ...dataTransaksi, trans_kode: value });
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-3">Jangka Waktu</label>
                                <div className="col-md-5">
                                    <input className="form-control" readOnly value={dataTransaksi?.deposito?.produk?.nama || ''} />
                                </div>
                                <div className="col-md-3">
                                    <div className="input-group">
                                        <input className="form-control border-end-0" readOnly value={dataTransaksi?.deposito?.produk?.jkw || ''} />
                                        <span className="input-group-text bg-white">Bulan</span>
                                    </div>
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-3">Tgl Valuta</label>
                                <div className="col-md-3">
                                    <input
                                        className="form-control"
                                        type="date"
                                        value={dataTransaksi?.tgl_valuta || ''}
                                        onChange={(e) => {
                                            setDataTransaksi({ ...dataTransaksi, tgl_valuta: e.target.value });
                                        }}
                                    />
                                </div>
                                <label className="col-form-label col-md-3 text-end">Tgl Jatuh Tempo</label>
                                <div className="col-md-3">
                                    <input className="form-control" type="date" value={dataTransaksi?.tgl_jatuh_tempo || ''} />
                                </div>
                            </div>
                            <hr />
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Valuta Deposito</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"
                                            readOnly
                                            thousandSeparator="."
                                            decimalSeparator=","
                                            value={dataTransaksi?.nilai_valuta || ''}
                                            onValueChange={(values) => {
                                                setDataTransaksi({ ...dataTransaksi, nilai_valuta: parseInt(values.value) });
                                            }}
                                        />
                                    </div>
                                </div>
                                <label className="col-form-label col-md-3 text-end">Bunga/Th</label>
                                <div className="col-md-2">
                                    <div className="input-group">
                                        <input
                                            className="form-control border-end-0"
                                            readOnly
                                            value={dataTransaksi?.deposito?.produk?.suku_bunga || ''}
                                        />
                                        <span className="input-group-text bg-white">%</span>
                                    </div>
                                </div>
                            </div>
                            {dataTransaksi.trans_kode == '43' && (
                                <div>
                                    <hr className="mt-3" />
                                    <div className="form-group row mb-2">
                                        <label className="col-form-label col-md-3">Rekening OB</label>
                                        <div className="col-md-5">
                                            <div className="input-group">
                                                <input
                                                    className="form-control"
                                                    placeholder="Rekening"
                                                    readOnly
                                                    value={dataTransaksi?.tabungan?.rekening || ''}
                                                />
                                                <button className="btn btn-primary" onClick={() => modalRekeningTabungan.open()}>
                                                    Browse
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="data-anggota">
                                        <div className="form-group row mb-2">
                                            <label className="col-form-label col-md-3">Nama Rekening</label>
                                            <div className="col-md-9">
                                                <input
                                                    className="form-control"
                                                    placeholder="Nama Rekening"
                                                    readOnly
                                                    value={dataTransaksi?.tabungan?.anggota?.nama_lengkap || ''}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                    </Modal.Body>
                    <Modal.Footer className="justify-content-between d-flex">
                        <button onClick={close} className="btn btn-danger align-items-center d-flex gap-2">
                            <X size={18} />
                            Tutup
                        </button>
                        <ButtonSubmit
                            className="btn btn-success"
                            icon={<Save size={18} />}
                            disable={validasi || loading}
                            onClick={async () => {
                                await saveTransaction();
                            }}
                        >
                            Simpan
                        </ButtonSubmit>
                    </Modal.Footer>
                </Modal>
                {modalRekeningDeposito.modal}
                {modalRekeningTabungan.modal}
            </>
        );
    }, [dataTransaksi, loading, modalRekeningDeposito, modalRekeningTabungan, saveTransaction, showModal, validasi]);

    return { modal, open, close };
};