bakery-ia/frontend/src/components/domain/suppliers/CreateSupplierForm.tsx

// frontend/src/components/domain/suppliers/CreateSupplierForm.tsx
/**
 * Example usage of enum helpers with i18n in a supplier form
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Select } from '../../ui/Select';
import { Button } from '../../ui/Button/Button';
import { useSupplierEnums } from '../../../utils/enumHelpers';
import { SupplierType, SupplierStatus, PaymentTerms } from '../../../api/types/suppliers';

interface CreateSupplierFormProps {
  onSubmit: (data: SupplierFormData) => void;
  onCancel: () => void;
}

interface SupplierFormData {
  name: string;
  supplier_type: SupplierType;
  status: SupplierStatus;
  payment_terms: PaymentTerms;
  email: string;
  phone: string;
}

export const CreateSupplierForm: React.FC<CreateSupplierFormProps> = ({
  onSubmit,
  onCancel
}) => {
  const { t } = useTranslation(['suppliers', 'common']);
  const supplierEnums = useSupplierEnums();

  const [formData, setFormData] = useState<SupplierFormData>({
    name: '',
    supplier_type: SupplierType.INGREDIENTS,
    status: SupplierStatus.PENDING_APPROVAL,
    payment_terms: PaymentTerms.NET_30,
    email: '',
    phone: ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(formData);
  };

  const handleFieldChange = (field: keyof SupplierFormData, value: any) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Supplier Name */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {t('common:forms.supplier_name')} *
          </label>
          <input
            type="text"
            required
            value={formData.name}
            onChange={(e) => handleFieldChange('name', e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder={t('common:forms.enter_supplier_name')}
          />
        </div>

        {/* Supplier Type - Using enum helper */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {supplierEnums.getFieldLabel('supplier_type')} *
          </label>
          <Select
            options={supplierEnums.getSupplierTypeOptions()}
            value={formData.supplier_type}
            onChange={(value) => handleFieldChange('supplier_type', value as SupplierType)}
            placeholder={t('common:forms.select_option')}
            helperText={supplierEnums.getFieldDescription('supplier_type')}
          />
        </div>

        {/* Supplier Status - Using enum helper */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {supplierEnums.getFieldLabel('supplier_status')}
          </label>
          <Select
            options={supplierEnums.getSupplierStatusOptions()}
            value={formData.status}
            onChange={(value) => handleFieldChange('status', value as SupplierStatus)}
            placeholder={t('common:forms.select_option')}
          />
        </div>

        {/* Payment Terms - Using enum helper */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {supplierEnums.getFieldLabel('payment_terms')} *
          </label>
          <Select
            options={supplierEnums.getPaymentTermsOptions()}
            value={formData.payment_terms}
            onChange={(value) => handleFieldChange('payment_terms', value as PaymentTerms)}
            placeholder={t('common:forms.select_option')}
            helperText={supplierEnums.getFieldDescription('payment_terms')}
          />
        </div>

        {/* Email */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {t('common:forms.email')}
          </label>
          <input
            type="email"
            value={formData.email}
            onChange={(e) => handleFieldChange('email', e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder={t('common:forms.enter_email')}
          />
        </div>

        {/* Phone */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {t('common:forms.phone')}
          </label>
          <input
            type="tel"
            value={formData.phone}
            onChange={(e) => handleFieldChange('phone', e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder={t('common:forms.enter_phone')}
          />
        </div>
      </div>

      {/* Actions */}
      <div className="flex justify-end space-x-4">
        <Button
          type="button"
          variant="secondary"
          onClick={onCancel}
        >
          {t('common:actions.cancel')}
        </Button>
        <Button
          type="submit"
          variant="primary"
        >
          {t('common:actions.create')}
        </Button>
      </div>

      {/* Display current selections for debugging */}
      <div className="mt-8 p-4 bg-gray-50 rounded-md">
        <h3 className="text-sm font-medium text-gray-700 mb-2">Current Selections:</h3>
        <ul className="text-sm text-gray-600 space-y-1">
          <li>
            <strong>Tipo:</strong> {supplierEnums.getSupplierTypeLabel(formData.supplier_type)}
          </li>
          <li>
            <strong>Estado:</strong> {supplierEnums.getSupplierStatusLabel(formData.status)}
          </li>
          <li>
            <strong>Términos de Pago:</strong> {supplierEnums.getPaymentTermsLabel(formData.payment_terms)}
          </li>
          <li>
            <strong>Debug - Payment Terms Raw:</strong> {formData.payment_terms}
          </li>
          <li>
            <strong>Debug - Translation Test:</strong> {t('suppliers:payment_terms.net_30')}
          </li>
        </ul>
      </div>
    </form>
  );
};