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";
import { LinkPaymentFormData, IdentityType, Language, LinkContentType, LinkPaymentSendMethod } from '@/entities/additional-service/model/types';



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

    const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
    const [formData, setFormData] = useState<LinkPaymentFormData>({
      mid: 'nictest001m',
      sendMethod: LinkPaymentSendMethod.SMS,
      goodsName: '',
      amount: 0,
      moid: '',
      paymentExpiryDate: '',
      buyerName: '',
      email: '',
      phoneNumber: '',
      isIdentity: false,
      identityType: IdentityType.INDIVIDUAL,
      identityValue: '',
      language: Language.KR,
      linkContentType: LinkContentType.BASIC
    });

  useSetHeaderTitle('링크결제 신청');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

  const onClickToBack = () => {
        navigate(-1);
    };
  
  const onClickToChangeTab = () => {
      if(processStep === ProcessStep.One) {
          setProcessStep(ProcessStep.Two);
      }
      else if(processStep === ProcessStep.Two) {
          navigate(PATHS.additionalService.linkPayment.requestConfirm, {
            state: { formData }
          });
      }
  };

  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
                        formData={formData}
                        setFormData={setFormData}
                      ></LinkPaymentStep1>
                  }
                  { (processStep === ProcessStep.Two) &&
                      <LinkPaymentStep2
                          setProcessStep={ setProcessStep }
                          formData={formData}
                          setFormData={setFormData}
                      ></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"
                            onClick={() => onClickToBack() }
                            >이전</button>
                      <button
                          className="btn-50 btn-blue flex-3"
                          onClick={() => onClickToChangeTab() }
                      >결제 신청</button>
                  </div>
              }
          </div>
        </div>
      </main>
    </>
  );
};