import { ChangeEvent, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { useBillingChargeMutation } from '@/entities/transaction/api/use-billing-charge-mutation';
import {
  useSetOnBack,
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

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

  const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
  const [productName, setProductName] = useState<string>('테스트상품123');
  const [productAmount, setProductAmount] = useState<number | string>(1000000);
  const [orderNumber, setOrderNumber] = useState<string>('P146733723');
  const [buyerName, setBuyerName] = useState<string>('김테스트');
  const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
  const [installmentMonth, setInstallmentMonth] = useState<string>('00');

  useSetHeaderTitle('빌링 결제 신청');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.transaction.billing.list);
  });
  useSetFooterMode(false);

  const { mutateAsync: billingCharge } = useBillingChargeMutation();

  const onClickToBillingCharge = () => {
    let params = {
      billKey: billKey,
      productName: productName,
      productAmount: productAmount,
      orderNumber: orderNumber,
      buyerName: buyerName,
      paymentRequestDate: paymentRequestDate,
      installmentMonth: installmentMonth
    };
    billingCharge(params).then((rs) => {
      console.log(rs);
      alert('성공')
      navigate(PATHS.transaction.billing.list);
    });
  };

  const makeInstallmentMonthSelect = () => {
    let rs = [];
    
    rs.push(
      <option 
        key={ `key-installment` }
        value=''
      >선택</option>
    );
    rs.push(
      <option 
        key={ `key-installment-0` }
        value='00'
      >일시불</option>
    );
    for(let i=2;i<=24;i++){
      let val = (i < 10)? '0'+i: ''+i;
      rs.push(
        <option 
          key={ `key-installment-${i}`}
          value={ val }
        >{i}개월</option>
      );
    };
    return rs;
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="billing-title">결제 정보 입력</div>
              <div className="billing-form">
                <div className="billing-row">
                  <div className="billing-label">빌키 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      readOnly={ true }
                      value={ billKey }
                    />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">상품명 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ productName }
                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
                    />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">상품금액 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ productAmount }
                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
                    />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">주문번호 <span>*</span></div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ orderNumber }
                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
                    />
                  </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">결제 요청일자</div>
                  <div className="billing-field">
                    <div className="input-wrapper date wid-100">
                      <input
                        type="text"
                        placeholder=""
                        value={ paymentRequestDate }
                      />
                      <button
                        className="date-btn"
                        type="button"
                        
                      >
                        <img 
                          src={ IMAGE_ROOT + '/ico_date.svg' }
                          alt="clear"
                        />
                      </button>
                    </div>
                  </div>
                </div>

                <div className="billing-row">
                  <div className="billing-label">할부 개월</div>
                  <div className="billing-field">
                    <select
                      value={ installmentMonth }
                      onChange={ (e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value) }
                    >
                      { makeInstallmentMonthSelect() }
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToBillingCharge() }
              >결제 신청</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};