'use client'
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { CiCircleRemove } from 'react-icons/ci';
import Modal from '.'
import { LoaderSVG } from '../SVGs/CommonSVG';
import PrimaryButton from '../Forms/PrimaryButton';
import BorderButton from '../Forms/BorderButton';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';

const ConfirmationModal = (props) => {
    const { modal, setModal, loader, args, callbackFunction } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const { translations } = useTranslation();

    const [mounted, setMounted] = useState(false);

    useEffect(() => setMounted(true), []);

    return mounted ? createPortal(
        <Modal modalSize="md:w-2/4 lg:w-1/3 xl:w-96 2xl:w-[26rem]" modal={modal} setModal={setModal} childMainModalClass="!z-[80]">
            <div className="text-center py-2">
                <div className={`mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full ${args?.iconWrapperClass ?? 'bg-danger/10'}`}>
                    {args?.icon ? args?.icon : <CiCircleRemove className="h-10 w-10 text-danger" />}
                </div>
                {args?.title ? (
                    <>
                        <h3 className="mb-2 text-lg font-semibold text-neutral-900 tracking-tight">
                            {args.title}
                        </h3>
                        <p className="mb-6 text-sm font-normal text-neutral-600 tracking-tight">
                            {args.message}
                        </p>
                    </>
                ) : (
                    <h3 className="mb-6 text-base font-medium text-neutral-900 tracking-tight">
                        {args?.message}
                    </h3>
                )}
                <div className="flex justify-center gap-2">
                    <BorderButton customClass={'w-full max-w-40'} onClick={() => setModal((prev) => prev !== modal)}>
                        {userDetails?.role === 'admin' ? 'Cancel' : translations?.cancel}
                    </BorderButton>
                    <PrimaryButton customClass={'flex items-center justify-center w-full max-w-44 whitespace-nowrap gap-2'} disabled={loader ? loader : false} onClick={callbackFunction}>
                        {args?.buttonText ? args?.buttonText : translations?.submit} {loader && <LoaderSVG customClass='min-w-5 min-h-5' />}
                    </PrimaryButton>
                </div>
            </div>
        </Modal>
        , document.body) : null;
}

export default ConfirmationModal