import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useState } from 'react';
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
import { ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from '@/entities/additional-service/model/fund-account/types';


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

  const [mid, setMid] = useState<string>('nictest001m')
  const [transferAmount, setTransferAmount] = useState<number>(0);
  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
  const [transferMemo, setTransferMemo] = useState<string>('');

  const { mutateAsync: extensionFundAccountRequest } = useExtensionFundAccountTransferRequestMutation();
  
  useSetHeaderTitle('자금이체 이체등록');
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.fundAccount.transferList);
  });

  const callExtensionFundAccountTransferRequest = () => {
    let params: ExtensionFundAccountTransferRequestParams = {
      mid: mid,
      transferAmount: transferAmount,
      receiveBankCode: receiveBankCode,
      receiveAccountNo: receiveAccountNo,
      receiveAccountName: receiveAccountName,
      transferMemo: transferMemo
    };
    extensionFundAccountRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
      navigate(PATHS.additionalService.payout.list);
    });
  };
  
  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="ing-list">
              <div className="billing-form gap-30">
                <div className="billing-row">
                  <div className="billing-label">서브ID</div>
                  <div className="billing-field">
                    <select></select>
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">은행</div>
                  <div className="billing-field">
                    <select></select>
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">계좌번호</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ receiveAccountNo }
                      onChange={ (e) => setReceiveAccountNo(e.target.value) }
                     />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">예금주명</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ receiveAccountName }
                      onChange={ (e) => setReceiveAccountName(e.target.value) }
                     />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">이체금액</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ transferAmount }
                      onChange={ (e) => setTransferAmount(parseInt(e.target.value)) }
                     />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">주문번호</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                    />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">입금인자</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div className="apply-row">
        <button 
          className="btn-50 btn-blue flex-1"
          onClick={ callExtensionFundAccountTransferRequest }
        >등록</button>
      </div>
    </>
  );
};