import { Role, User } from '@/types';
import { useRole } from '@/useQuery/query';
import { Save } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';
import { ButtonSubmit } from '../costum/button_submit';
import { SelectRole } from '../costum/SelectRole';

export const useModalUser = ({ onSubmit }: { onSubmit?: (user: User) => boolean | Promise<boolean> }) => {
    const [showModal, setShowModal] = useState(false);
    const [dataUser, setDataUser] = useState<User>();

    const roles = useRole();

    const open = (data?: User) => {
        if (data) {
            setDataUser(data);
        }
        setShowModal(true);
    };

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

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

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

    const modal = useMemo(() => {
        return (
            <Modal show={showModal} onHide={close} onExited={clear}>
                <Modal.Header closeButton>
                    <h5 className="m-0">Data User</h5>
                </Modal.Header>
                <Modal.Body>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Username</label>
                        <div className="col-md-8">
                            <input
                                className="form-control"
                                name="username"
                                value={dataUser?.username || ''}
                                onChange={(e) => {
                                    setDataUser({
                                        ...dataUser,
                                        username: e.target.value.toLowerCase(),
                                    });
                                }}
                            />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Password</label>
                        <div className="col-md-8">
                            <input
                                className="form-control"
                                type="password"
                                name="password"
                                placeholder="******"
                                value={dataUser?.password || ''}
                                onChange={(e) => {
                                    setDataUser({
                                        ...dataUser,
                                        password: e.target.value,
                                    });
                                }}
                            />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Nama</label>
                        <div className="col-md-8">
                            <input className="form-control" name="name" value={dataUser?.name || ''} onChange={handleChange} />
                        </div>
                    </div>
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Email</label>
                        <div className="col-md-8">
                            <input
                                className="form-control"
                                name="email"
                                value={dataUser?.email || ''}
                                onChange={(e) => {
                                    setDataUser({
                                        ...dataUser,
                                        email: e.target.value.toLowerCase(),
                                    });
                                }}
                            />
                        </div>
                    </div>
                    <hr />
                    {/* <div className="row mb-2">
                        <label className="col-form-label col-md-4">Pegawai</label>
                        <div className="col-md-8">
                            <input className="form-control" name="email" value={dataUser?.pegawai?.nama || ''} onChange={handleChange} />
                        </div>
                    </div> */}
                    <div className="row mb-2">
                        <label className="col-form-label col-md-4">Role</label>
                        <div className="col-md-8">
                            <SelectRole
                                value={dataUser?.role_id?.toString()}
                                onChange={(v) => {
                                    const role = roles.data?.find((item: Role) => item.id?.toString() == v);
                                    if (role) {
                                        setDataUser({
                                            ...dataUser,
                                            role: role,
                                            role_id: role.id,
                                        });
                                    }
                                }}
                            />
                        </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 () => {
                            if (onSubmit && dataUser) {
                                const save: boolean = await onSubmit(dataUser);
                                if (save) {
                                    close();
                                }
                            }
                        }}
                    >
                        Simpan
                    </ButtonSubmit>
                </Modal.Footer>
            </Modal>
        );
    }, [dataUser, handleChange, onSubmit, roles.data, showModal]);

    return { modal, open, close };
};