import {useState} from 'react';
import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step1';
import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step2';
import {HeaderType} from '@/entities/common/model/types';
import {ProcessStep} from '@/entities/transaction/model/types';
import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';
import {useNavigate} from '@/shared/lib/hooks/use-navigate';
import {PATHS} from "@/shared/constants/paths";

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

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

  useSetHeaderTitle('링크결제 신청');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  
  const onClickToChangeTab = () => {
      if(processStep === ProcessStep.One) {
          setProcessStep(ProcessStep.Two);
      }
      else if(processStep === ProcessStep.Two) {
          navigate(PATHS.additionalService.linkPayment.requestConfirm)
      }
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="issue-progress">
                <div className="bar">
                    {(processStep === ProcessStep.One) &&
                        <div
                            className="fill"
                            style={{ width: '50%' }}
                        ></div>
                    }
                    {(processStep === ProcessStep.Two) &&
                        <div
                            className="fill"
                            style={{ width: '100%' }}
                        ></div>
                    }
                </div>
              </div>

                {(processStep === ProcessStep.One) &&
                      <LinkPaymentStep1 ></LinkPaymentStep1>
                  }
                  { (processStep === ProcessStep.Two) &&
                      <LinkPaymentStep2
                          setProcessStep={ setProcessStep }
                      ></LinkPaymentStep2>
                  }

            </div>
              {(processStep === ProcessStep.One) &&
                  <div className="apply-row">
                      <button
                          className="btn-50 btn-blue flex-1"
                          onClick={() => onClickToChangeTab() }
                      >다음</button>
                  </div>
              }
              {(processStep === ProcessStep.Two) &&
                  <div className="apply-row two-button">
                      <button
                          className="btn-50 btn-darkgray flex-1">
                          이전</button>
                      <button
                          className="btn-50 btn-blue flex-3"
                          onClick={() => onClickToChangeTab() }
                      >결제 신청</button>
                  </div>
              }
          </div>
        </div>
      </main>
    </>
  );
};