import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/use-extension-ars-apply-mutation';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

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

  const { mutateAsync: arsApply } = useExtensionArsApplyMutation();

  useSetHeaderTitle('결제 신청');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.arsCardPayment.list);
  });

  const callArsCardPaymentRequest = () => {
    let arsApplyParams = {
      mid: 'string',
      moid: 'string',
      goodsName: 'string',
      amount: 0,
      instmntMonth: '00',
      buyerName: 'string',
      phoneNumber: 'string',
      email: 'string',
      arsPaymentMethod: 'SMS',
    };
    arsApply(arsApplyParams).then((rs) => {
      navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
      console.log(rs)
    }).catch(() => {

    }).finally(() => {
      
    });

  };

  const onClickToRequest = () => {
    callArsCardPaymentRequest();
  };  

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="billing-form gap-16">
                <div className="billing-row">
                  <div className="billing-label">가맹점 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value="nictest001m" 
                      readOnly={ true } 
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">주문번호 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value="wadizcop0g2025062"
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">상품명 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value="123456" 
                    />
                  </div>
                </div>

                  <div className="billing-row">
                    <div className="billing-label">금액 <span>*</span></div>
                    <div className="billing-field">
                      <input 
                        type="text" 
                        value="1000"
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">할부기간 <span>*</span></div>
                    <div className="billing-field">
                      <select disabled>
                        <option selected>일시불</option>
                        <option>일시불</option>
                      </select>
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">구매자명 <span>*</span></div>
                    <div className="billing-field">
                      <input
                        type="text" 
                        value="김테스트" 
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">휴대폰 번호 <span>*</span></div>
                    <div className="billing-field">
                      <input 
                        type="text" 
                        value="01012345678" 
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">이메일</div>
                    <div className="billing-field">
                      <input 
                        type="text" 
                        value="NICE@NAVER.COM"
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">결제 방식 <span>*</span></div>
                    <div className="billing-field">
                      <div className="seg-buttons">
                        <button className="btn-36 btn-blue light">SMS</button>
                        <button className="btn-36 btn-white light">호전환</button>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToRequest() }
              >결제 신청</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};