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';

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 { navigate } = useNavigate();
  
  useSetOnBack(() => {
    navigate(PATHS.transaction.cashReceipt.list);
  });
  return (
    <>
      <h2 className="issue-title">발행 정보 입력</h2>
      <div className="issue-form">
        <div className="issue-row">
          <div className="issue-label">사업자 번호</div>
          <div className="issue-field">
            <input 
              className="error"
              type="text"
              value={ businessNumber }
              disabled={ true }
            />
          </div>
        </div>

        <div className="issue-row">
          <div className="issue-label">용도</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) }
              >소득공제</button>
              <button
                className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
                type="button"
                onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
              >지출증빙</button>
            </div>
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">상품명</div>
          <div className="issue-field">
            <input 
              type="text" 
              placeholder="상품명"
              value={ productName }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">구매자</div>
          <div className="issue-field">
            <input 
              type="text" 
              placeholder="구매자명"
              value={ buyerName }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">발행번호</div>
          <div className="issue-field">
            <input 
              type="text" 
              placeholder="사업자번호 OR 휴대폰번호"
              value={ issueNumber }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setIssueNumber(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">이메일 주소</div>
          <div className="issue-field">
            <input
              type="email"
              placeholder="TEST123@nicepay.com"
              value={ email }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
            />
          </div>
        </div>
        <div className="issue-row">
          <div className="issue-label">전화번호</div>
          <div className="issue-field">
            <input
              type="tel"
              placeholder="01012345678"
              value={ phoneNumber }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setPhoneNumber(e.target.value) }
            />
          </div>
        </div>
      </div>
    </>
  );
};