import { ChangeEvent } from 'react';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types';
import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';

export interface CashReceiptHandWrittenIssuanceStep2Props {
  setProcessStep: (processStep: ProcessStep) => void;
  issueAmount: number;
  supplyAmount: number;
  vatAmount: number;
  taxFreeAmount: number;
  serviceCharge: number;
  setIssueAmount: (issueAmount: number) => void;
  setSupplyAmount: (supplyAmount: number) => void;
  setVatAmount: (vatAmount: number) => void;
  setTaxFreeAmount: (taxFreeAmount: number) => void;
  setServiceCharge: (serviceCharge: number) => void;
  onClickToVatCalculate: () => void;
};
export const CashReceiptHandWrittenIssuanceStep2 = ({
  setProcessStep,
  issueAmount,
  supplyAmount,
  vatAmount,
  taxFreeAmount,
  serviceCharge,
  setIssueAmount,
  setSupplyAmount,
  setVatAmount,
  setTaxFreeAmount,
  setServiceCharge,
  onClickToVatCalculate
}: CashReceiptHandWrittenIssuanceStep2Props) => {
  const { t } = useTranslation();
  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();

  useSetOnBack(() => {
    setProcessStep(ProcessStep.One);
  });

  return (
    <>
      <h2 className="issue-title">{t('transaction.handWrittenIssuance.step2Title')}</h2>

      <div className="issue-form">
        <div className="issue-row">
          <div className="issue-label">{t('transaction.handWrittenIssuance.issueAmount')}</div>
          <div className="issue-field">
            <div className="seg-buttons">
              <NumericFormat
                value={ issueAmount }
                allowNegative={ false }
                displayType="input"
                onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueAmount(parseInt(e.target.value)) }
                onFocus={handleInputFocus}
              ></NumericFormat>
              <button
                className="btn-40 btn-white"
                type="button"
                onClick={ onClickToVatCalculate }
              >{t('transaction.handWrittenIssuance.vatAutoCalc')}</button>
            </div>
          </div>
        </div>

        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.supplyAmount')}</div>
          <div className="issue-field">
            <NumericFormat
              value={ supplyAmount }
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(parseInt(e.target.value)) }
              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.vat')}</div>
          <div className="issue-field">
            <NumericFormat
              value={ vatAmount }
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(parseInt(e.target.value)) }
              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.taxFreeAmount')}</div>
          <div className="issue-field">
            <NumericFormat
              value={ taxFreeAmount }
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(parseInt(e.target.value)) }
              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
        <div className="issue-row" style={keyboardAwarePadding}>
          <div className="issue-label">{t('transaction.fields.serviceAmount')}</div>
          <div className="issue-field">
            <NumericFormat
              value={ serviceCharge }
              allowNegative={ false }
              displayType="input"
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(parseInt(e.target.value)) }
              onFocus={handleInputFocus}
            ></NumericFormat>
          </div>
        </div>
        <div className="issue-note error">
          {t('transaction.handWrittenIssuance.errorMessage')}
        </div>
      </div>
    </>
  );
};