import { ChangeEvent } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { CashReceiptPurposeType } from '../model/types';
import { PatternFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';

export interface CashReceiptHandWrittenIssuanceStep1Props {
  businessNumber?: string;
  purposeType?: CashReceiptPurposeType;
  productName?: string;
  buyerName?: string;
  issueNumber?: string;
  email?: string;
  phoneNumber?: string;
  setBusinessNumber: (businessNumber: string) => void;
  setPurposeType: (purposeType: CashReceiptPurposeType) => void;
  setProductName: (productName: string) => void;
  setBuyerName: (buyerName: string) => void;
  setIssueNumber: (issueNumber: string) => void;
  setEmail: (email: string) => void;
  setPhoneNumber: (phoneNumber: string) => void;
};

export const CashReceiptHandWrittenIssuanceStep1 = ({
  businessNumber,
  purposeType,
  productName,
  buyerName,
  issueNumber,
  email,
  phoneNumber,
  setBusinessNumber,
  setPurposeType,
  setProductName,
  setBuyerName,
  setIssueNumber,
  setEmail,
  setPhoneNumber
}: CashReceiptHandWrittenIssuanceStep1Props) => {
  const { t } = useTranslation();
  const { navigate } = useNavigate();
  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();

  useSetOnBack(() => {
    navigate(PATHS.transaction.cashReceipt.list);
  });
  return (
    <>
      <h2 className="issue-title">{t('transaction.handWrittenIssuance.step1Title')}</h2>
      <div className="issue-form">
        <div className="issue-row">
          <div className="issue-label">{t('transaction.handWrittenIssuance.businessNumber')}</div>
          <div className="issue-field">
            <input
              className="error"
              type="text"
              value={businessNumber}
              readOnly={true}
            />
          </div>
        </div>

        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.purpose')}</div>
          <div className="issue-field">
            <div className="seg-buttons">
              <button
                className={`btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION) ? 'btn-blue' : 'btn-white'}`}
                type="button"
                onClick={() => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION)}
              >{t('transaction.handWrittenIssuance.incomeDeduction')}</button>
              <button
                className={`btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF) ? 'btn-blue' : 'btn-white'}`}
                type="button"
                onClick={() => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF)}
              >{t('transaction.handWrittenIssuance.expenseProof')}</button>
            </div>
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.productName')}</div>
          <div className="issue-field">
            <input
              type="text"
              placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
              value={productName}
              onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
              onFocus={handleInputFocus}
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.buyer')}</div>
          <div className="issue-field">
            <input
              type="text"
              placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
              value={buyerName}
              onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
              onFocus={handleInputFocus}
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">{t('transaction.fields.issueNumber')}</div>
          <div className="issue-field">
            <PatternFormat
              placeholder={t('transaction.handWrittenIssuance.issueNumberPlaceholder')}
              value={issueNumber}
              valueIsNumericString
              format="###########"
              onChange={(e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value)}
              onFocus={handleInputFocus}
            ></PatternFormat>
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">{t('account.emailAddress')}</div>
          <div className="issue-field">
            <input
              type="email"
              placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
              value={email}
              onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
              onFocus={handleInputFocus}
            />
          </div>
        </div>
        <div className="issue-row" style={keyboardAwarePadding}>
          <div className="issue-label">{t('account.phoneNumber')}</div>
          <div className="issue-field">
            <PatternFormat
              placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
              value={phoneNumber}
              valueIsNumericString
              format="###########"
              onChange={(e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value)}
              onFocus={handleInputFocus}
            ></PatternFormat>
          </div>
        </div>
      </div>
    </>
  );
};