import { useTranslation } from 'react-i18next';
import { useQrState } from '../store/qrContext';
import { useQrEncode } from '../hooks/useQrEncode';
import { buildVCardText } from '../utils/qrText';

const FIELDS = [
  { key: 'name', i18n: 'vcard.name' },
  { key: 'phone', i18n: 'vcard.phone' },
  { key: 'email', i18n: 'vcard.email' },
  { key: 'company', i18n: 'vcard.company' },
  { key: 'title', i18n: 'vcard.title' },
  { key: 'address', i18n: 'vcard.address' },
  { key: 'vcardUrl', i18n: 'vcard.url' },
  { key: 'birthday', i18n: 'vcard.birthday' },
  { key: 'note', i18n: 'vcard.note' },
  { key: 'photo', i18n: 'vcard.photo' },
];

export default function VCardMode() {
  const { t } = useTranslation();
  const { state, dispatch } = useQrState();
  const { encode } = useQrEncode();

  const update = (field: string, value: string) => {
    const data = { ...state.formData, [field]: value };
    dispatch({ type: 'SET_FORM_DATA', payload: data });
    encode(buildVCardText(data));
  };

  return (
    <div className="flex gap-2 items-center h-full px-4">
      {FIELDS.map((f) => (
        <input
          key={f.key}
          placeholder={t(f.i18n)}
          value={state.formData[f.key] || ''}
          onChange={(e) => update(f.key, e.target.value)}
          className="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
        />
      ))}
    </div>
  );
}