import { ChangeEvent, 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/ars/use-extension-ars-apply-mutation';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';

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

  const { mutateAsync: arsApply } = useExtensionArsApplyMutation();

  const [mid, setMid] = useState<string>('');
  const [moid, setMoid] = useState<string>('');
  const [goodsName, setGoodsName] = useState<string>('');
  const [amount, setAmount] = useState<number>(0);
  const [instmntMonth, setInstmntMonth] = useState<string>('');
  const [buyerName, setBuyerName] = useState<string>('');
  const [phoneNumber, setPhoneNumber] = useState<string>('');
  const [email, setEamil] = useState<string>('');
  const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);

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

  const callArsApply = () => {
    let arsApplyParams: ExtensionArsApplyParams = {
      mid: mid,
      moid: moid,
      goodsName: goodsName,
      amount: amount,
      instmntMonth: instmntMonth,
      buyerName: buyerName,
      phoneNumber: phoneNumber,
      email: email,
      arsPaymentMethod: arsPaymentMethod,
    };
    arsApply(arsApplyParams).then((rs) => {
      navigate(PATHS.additionalService.ars.requestSuccess);
      console.log(rs)
    }).catch(() => {

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

  };

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

  const getArsPaymentMethodBtns = () => {
    let rs = [];
    rs.push(
      <div 
        key="ars-payment-method-btns"
        className="seg-buttons"
      >
        <button 
          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.SMS)? 'btn-blue': 'btn-white'}`}
          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.SMS) }
        >{ ArsPaymentMethod.SMS }</button>
        <button 
          className={`btn-36 light ${(arsPaymentMethod === ArsPaymentMethod.ARS)? 'btn-blue': 'btn-white'}`}
          onClick={ (e) => setArsPaymentMethod(ArsPaymentMethod.ARS) }
        >{ ArsPaymentMethod.ARS }</button>
      </div>
    );
    return rs;
  };

  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={ moid }
                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value) }
                    />
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">상품명 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ goodsName }
                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value) }
                    />
                  </div>
                </div>

                  <div className="billing-row">
                    <div className="billing-label">금액 <span>*</span></div>
                    <div className="billing-field">
                      <input 
                        type="text" 
                        value={ amount }
                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value)) }  
                      />
                    </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={ buyerName }
                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">휴대폰 번호 <span>*</span></div>
                    <div className="billing-field">
                      <input 
                        type="text" 
                        value={ phoneNumber }
                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">이메일</div>
                    <div className="billing-field">
                      <input 
                        type="text" 
                        value={ email }
                        onChange={ (e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value) }
                      />
                    </div>
                  </div>

                  <div className="billing-row">
                    <div className="billing-label">결제 방식 <span>*</span></div>
                    <div className="billing-field">
                    { getArsPaymentMethodBtns() }  
                    </div>
                  </div>
              </div>
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToRequest() }
              >결제 신청</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};