import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceitHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step1';
import { CashReceitHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step2';
import { ProcessStep } from '@/entities/transaction/model/types';
import { HeaderType } from '@/entities/common/model/types';
import { 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

export const CashReceitHandWrittenIssuancePage = () => {
  const { navigate } = useNavigate();

  // 1 or 2
  const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);

  useSetHeaderTitle('수기 발행');
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);
  
  const onClickToChangeTab = () => {
    if(processStep === ProcessStep.One){
      setProcessStep(ProcessStep.Two);
    }
    else if(processStep === ProcessStep.Two){
      // 완료시?
      alert('완료');
      navigate(PATHS.transaction.cashReceit.list);
    }
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active" id="tab1">
            <div className="option-list">
              <div className="issue-progress">
                <div className="bar">
                  <div 
                    className="fill" 
                    style={{ width: '50%' }}
                  ></div>
                </div>
                { (processStep === ProcessStep.One) &&
                  <CashReceitHandWrittenIssuanceStep1></CashReceitHandWrittenIssuanceStep1>
                }
                { (processStep === ProcessStep.Two) &&
                  <CashReceitHandWrittenIssuanceStep2
                    setProcessStep={ setProcessStep }
                  ></CashReceitHandWrittenIssuanceStep2>
                }
              </div>
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToChangeTab() }
              >다음</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};