import { Akun } from '@/types';
import { Save } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import { ButtonSubmit } from '../costum/button_submit';
import { SelectJurnal } from '../costum/SelectJurnal';
import { SelectKategoriJurnal } from '../costum/SelectKategoriJurnal';

export const useModalAkun = ({ onSubmit }: { onSubmit?: (akun: Akun) => boolean | Promise<boolean> }) => {
    const [showModal, setShowModal] = useState(false);
    const [dataAkun, setDataAkun] = useState<Akun>();
    const [isEdit, setIsEdit] = useState(false);

    const open = (akun?: Akun) => {
        if (akun) {
            setDataAkun(akun);
            setIsEdit(true);
        }
        setShowModal(true);
    };

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

    const clear = () => {
        setDataAkun(undefined);
        setIsEdit(false);
    };

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

    const handleSubmit = useCallback(async () => {
        if (onSubmit) {
            await onSubmit(dataAkun!);
        }
    }, [onSubmit, dataAkun]);

    const modal = useMemo(() => {
        return (
            <Modal show={showModal} onHide={close} onExited={clear}>
                <Modal.Header closeButton>
                    <h5 className="m-0">Data Akun</h5>
                </Modal.Header>
                <Modal.Body>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Kode Akun</label>
                        <div className="col-md-8">
                            <input className="form-control" name="kode_akun" value={dataAkun?.kode_akun || ''} onChange={handleChange} />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Nama Akun</label>
                        <div className="col-md-8">
                            <input className="form-control" name="nama" value={dataAkun?.nama || ''} onChange={handleChange} />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Kode Induk</label>
                        <div className="col-md-8">
                            <input className="form-control" name="kode_induk" value={dataAkun?.kode_induk || ''} onChange={handleChange} />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Kategori</label>
                        <div className="col-md-8">
                            <SelectKategoriJurnal
                                value={dataAkun?.kategori || ''}
                                onChange={(v) => {
                                    setDataAkun({
                                        ...dataAkun,
                                        kategori: v,
                                    });
                                }}
                            />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Jurnal</label>
                        <div className="col-md-8">
                            <SelectJurnal
                                value={dataAkun?.jurnal || ''}
                                onChange={(v) => {
                                    setDataAkun({
                                        ...dataAkun,
                                        jurnal: v,
                                    });
                                }}
                            />
                        </div>
                    </div>
                </Modal.Body>
                <Modal.Footer>
                    <button className="btn btn-primary" onClick={close}>
                        Tutup
                    </button>
                    <ButtonSubmit
                        className="btn-success"
                        icon={<Save size={18} />}
                        onClick={async () => {
                            await handleSubmit();
                        }}
                    >
                        Simpan
                    </ButtonSubmit>
                    {!isEdit && (
                        <ButtonSubmit
                            className="btn-success"
                            icon={<Save size={18} />}
                            onClick={async () => {
                                await handleSubmit();
                            }}
                        >
                            Simpan dan Tambah
                        </ButtonSubmit>
                    )}
                </Modal.Footer>
            </Modal>
        );
    }, [dataAkun, handleChange, handleSubmit, isEdit, showModal]);

    return { modal, open, close };
};