import React, { useState } from 'react';
import LeumasIDRender from './LeumasIDRender';
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import MultiPageForm from '../Forms/MultiPageForm';
import { createLeumasIdForm } from '../Forms/FormTemplates';
import Login from "../Pages/Login/Login"

const HasIdValidation = ({ leumasId, setLeumasId, setMode }) => {
    const auth = useAuthUser();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const hasLeumasID = leumasId && Object.keys(leumasId).length > 0;
    const isLoggedIn = auth?.id || auth?.user?._id;

    const navigateToLogin = () => { setMode(<Login />) };

    const handleCreateLeumasIdClick = () => {
        if (isLoggedIn) {
            // Open the modal instead of changing the mode
            setIsModalOpen(true);
        } else {
            navigateToLogin();
        }
    };

    return (
        <>
            {hasLeumasID ? (
                <LeumasIDRender id={leumasId} />
            ) : (
                <div className="text-center">
                    <p className="mb-2">You do not have a Leumas ID</p>
                    <button 
                        className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600"
                        onClick={handleCreateLeumasIdClick}
                    >
                        Create Leumas ID
                    </button>
                </div>
            )}

            {isModalOpen && (
                <div className="fixed top-0 left-0 w-full h-full bg-blue-400 z-50 p-4">
                    <button 
                        className="absolute top-0 right-0 m-4 text-2xl font-bold"
                        onClick={() => setIsModalOpen(false)}
                    >
                        &times;
                    </button>
                    <MultiPageForm 
                        model={"LeumasId"}
                        endpoint={"LeumasAPI"}
                        token={auth?.token || auth?.authUserState?.token}
                        extraData={{}}
                        AIMode={false}
                        isEditMode={false}
                        IDMode={true}
                        pages={createLeumasIdForm(isLoggedIn)}
                        selectedItemId={auth?.id || auth?.user?._id}
                    />
                </div>
            )}
        </>
    );
};

export default HasIdValidation;