import { useEffect, useState } from 'react'

import NavTwo from './NavTwo';
import LeftSideBar from './LeftSideBar';
import DocumentContainer from './DocumentContainer';

import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
import Loader from '../../dashboard/Loader';
import { hideLoader } from '../../../store/slices/loaderSlice';
import { useNavigate } from 'react-router-dom';

export interface IsSendInterface {
  send: boolean | null;
  save: boolean;
}

const ProcessStepTwo = () => {

  const [isFields, setIsFields] = useState(true);
  const [selectedRecipient, setSelectedRecipient] = useState(0);

  const [transactionSaving, setTransactionSaving] = useState<boolean>(false);

  const [isSend, setIsSend] = useState<boolean | null>(null);
  const globalLoader = useSelector((state: RootState) => state.loader)
  const dispatch = useDispatch();
    const navigate = useNavigate();

  useEffect(() => {
    setTimeout(() => {
      dispatch(hideLoader());
    }, 800)
  }, [])


  return (
    <div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
      <NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />

      <div className='grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-46px)] overflow-hidden'>
        <LeftSideBar isFields={isFields} selectedRecipientIndx={selectedRecipient} setSelectedRecipient={setSelectedRecipient} />
        <DocumentContainer transactionSaving={transactionSaving} setTransactionSaving={setTransactionSaving} isSend={isSend} setIsSend={setIsSend} />
      </div>

      {globalLoader.isLoading && <Loader />}
    </div>
  )
}

export default ProcessStepTwo