import { IMAGE_ROOT } from '@/shared/constants/common';
import { AllTransactionCancelInfoResponse } from '../model/types';
import { NumericFormat } from 'react-number-format';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { BankCode } from '@/shared/@types/banking-code';
import { ChangeEvent, useEffect, useState } from 'react';

export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
  serviceCode: string;
  cancelPassword: string;
  setCancelPassword: (cancelPassword: string) => void;
  bankCode?: string;
  setBankCode?: (BankCode: string) => void;
  accountNo?: string;
  setAccountNo?: (accountNo: string) => void;
  accountHolder?: string;
  setAccountHolder?: (accountHolder: string) => void;
  cancelSupplyAmount: number;
  setCancelSupplyAmount: (cancelSupplyAmount: number) => void;
  cancelGoodsVat: number;
  setCancelGoodsVat: (cancelGoodsVat: number) => void;
  cancelTaxFreeAmount: number;
  setCancelTaxFreeAmount: (cancelTaxFreeAmount: number) => void;
  cancelServiceAmount: number;
  setCancelServiceAmount: (cancelServiceAmount: number) => void;
};

export const AllTransactionPartCancel = ({
  serviceCode,
  debtPreventionCancelDisplayInfo,
  debtPreventionCancelRequestInfo,
  goodsVat,
  isCompoundTax,
  isConditionalVatAutoCalcMerchant,
  isNpg,
  isVatAutoCalcMerchant,
  isVatDisplayed,
  partCancelCl,
  remainAmount,
  serviceAmount,
  supplyAmount,
  taxFreeAmount,
  vatAutoCalcSummary,
  cancelPassword,
  setCancelPassword,
  bankCode,
  setBankCode,
  accountNo,
  setAccountNo,
  accountHolder,
  setAccountHolder,
  cancelSupplyAmount,
  setCancelSupplyAmount,
  cancelGoodsVat,
  setCancelGoodsVat,
  cancelTaxFreeAmount,
  setCancelTaxFreeAmount,
  cancelServiceAmount,
  setCancelServiceAmount
}: AllTransactionPartCancelProps) => {
  
  
  return (
    <>
      { !!isCompoundTax  && 
        <div className="tb_both">
          <table className="partial-cancel-table">
            <colgroup>
              <col width="30%" />
              <col width="30%" />
              <col width="40%" />
            </colgroup>
            <thead>
              <tr>
                <th className="header-empty"></th>
                <th className="header-balance">잔액</th>
                <th className="header-cancel">취소금액</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="row-label">과세액</td>
                <td className="row-balance">
                  <NumericFormat
                    value={ supplyAmount } 
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat> 
                </td>
                <td className="row-cancel">
                  <NumericFormat
                    className="cancel-input"
                    value={ cancelSupplyAmount }
                    allowNegative={ false }
                    displayType="input"
                    onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
                  ></NumericFormat>
                </td>
              </tr>
                <tr>
                  <td className="row-label">부가세</td>
                  <td className="row-balance">
                    <NumericFormat
                      value={ goodsVat } 
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat> 
                  </td>
                  <td className="row-cancel">
                    <NumericFormat
                      className="cancel-input"
                      value={ cancelGoodsVat }
                      allowNegative={ false }
                      displayType="input"
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelGoodsVat(parseInt(e.target.value)) }
                    ></NumericFormat>
                  </td>
                </tr>
                <tr>
                  <td className="row-label">면세</td>
                  <td className="row-balance">
                    <NumericFormat
                      value={ taxFreeAmount } 
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </td>
                  <td className="row-cancel">
                    <NumericFormat
                      className="cancel-input"
                      value={ cancelTaxFreeAmount }
                      allowNegative={ false }
                      displayType="input"
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelTaxFreeAmount(parseInt(e.target.value)) }
                    ></NumericFormat>
                  </td>
                </tr>
                <tr>
                  <td className="row-label">봉사료</td>
                  <td className="row-balance">
                    <NumericFormat
                      value={ serviceAmount } 
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </td>
                  <td className="row-cancel">
                    <NumericFormat
                      className="cancel-input"
                      value={ cancelServiceAmount }
                      allowNegative={ false }
                      displayType="input"
                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
                    ></NumericFormat>
                  </td>
                </tr>
            </tbody>
          </table>
        </div>
      }

      <div className="form-section">
        <AllTransactionCancelSectionPasswordGroup
          cancelPassword={ cancelPassword }
          setCancelPassword={ setCancelPassword }
        ></AllTransactionCancelSectionPasswordGroup>
        { serviceCode === '03' &&
          <AllTransactionCancelSectionBankGroup
            bankCode={ bankCode }
            setBankCode={ setBankCode }
            accountNo={ accountNo }
            setAccountNo={ setAccountNo }
            accountHolder={ accountHolder }
            setAccountHolder={ setAccountHolder }
          ></AllTransactionCancelSectionBankGroup>
        }
      </div>  
    </>
  );
};