import { ChangeEvent } from 'react';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types';

export interface CashReceiptHandWrittenIssuanceStep2Props {
  setProcessStep: (processStep: ProcessStep) => void;
  supplyAmount: number | string;
  vatAmount: number | string;
  taxFreeAmount: number | string;
  serviceCharge: number | string;
  setSupplyAmount: (supplyAmount: number | string) => void;
  setVatAmount: (vatAmount: number | string) => void;
  setTaxFreeAmount: (taxFreeAmount: number | string) => void;
  setServiceCharge: (serviceCharge: number | string) => void;
};
export const CashReceiptHandWrittenIssuanceStep2 = ({
  setProcessStep,
  supplyAmount,
  vatAmount,
  taxFreeAmount,
  serviceCharge,
  setSupplyAmount,
  setVatAmount,
  setTaxFreeAmount,
  setServiceCharge
}: CashReceiptHandWrittenIssuanceStep2Props) => {
  useSetOnBack(() => {
    setProcessStep(ProcessStep.One);
  });

  const onClickToVatCalculate = () => {

  };

  return (
    <>
      <h2 className="issue-title">발행 금액 입력</h2>

      <div className="issue-form">
        <div className="issue-row">
          <div className="issue-label">발행금액</div>
          <div className="issue-field">
            <div className="seg-buttons">
              <input 
                type="text" 
                value="555,555,555" 
                readOnly={ true }
              />
              <button
                className="btn-40 btn-white"
                type="button"
                onClick={ () => onClickToVatCalculate() }
              >VAT자동계산</button>
            </div>
          </div>
        </div>

        <div className="issue-row">
          <div className="issue-label">공급가액</div>
          <div className="issue-field">
            <input
              className="error"
              type="text"
              placeholder=""
              value={ supplyAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">VAT</div>
          <div className="issue-field">
            <input
              className="error"
              type="text"
              placeholder=""
              value={ vatAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">면세금액</div>
          <div className="issue-field">
            <input
              className="error"
              type="text"
              placeholder=""
              value={ taxFreeAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">봉사료</div>
          <div className="issue-field">
            <input
              className="error"
              type="text"
              placeholder=""
              value={ serviceCharge }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-note error">
          발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다.
        </div>
      </div>
    </>
  );
};