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

export const useModalBank = ({ onSubmit }: { onSubmit?: (bank?: Bank) => boolean | Promise<boolean> }) => {
    const [showModal, setShowModal] = useState(false);
    const [bank, setBank] = useState<Bank>();

    const open = (data?: Bank) => {
        if (data) {
            setBank(data);
        }
        setShowModal(true);
    };

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

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

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

    const modal = useMemo(() => {
        return (
            <Modal show={showModal} onHide={close} onExited={clear}>
                <Modal.Header closeButton>
                    <h5 className="m-0">Data Bank</h5>
                </Modal.Header>
                <Modal.Body>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Nama Bank</label>
                        <div className="col-md-8">
                            <input className="form-control" name="nama" value={bank?.nama || ''} onChange={handleChange} />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Alamat</label>
                        <div className="col-md-8">
                            <input className="form-control" name="alamat" value={bank?.alamat || ''} onChange={handleChange} />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Nomor Telp</label>
                        <div className="col-md-8">
                            <input className="form-control" name="nomor_telp" value={bank?.nomor_telp || ''} onChange={handleChange} />
                        </div>
                    </div>
                </Modal.Body>
                <Modal.Footer>
                    <button className="btn btn-primary" onClick={close}>
                        Tutup
                    </button>
                    <ButtonSubmit
                        className="btn-success"
                        disable={!bank}
                        icon={<Save size={18} />}
                        onClick={async () => {
                            if (onSubmit) {
                                const save: boolean = await onSubmit(bank);
                                if (save) {
                                    close();
                                }
                            }
                        }}
                    >
                        Simpan
                    </ButtonSubmit>
                </Modal.Footer>
            </Modal>
        );
    }, [bank, handleChange, onSubmit, showModal]);

    return { modal, open, close };
};