import type { FormConfigField } from '~/src/ui/components/form';

import { useI18n } from '~/src/lib/i18n';
import { Form, getFieldDefaults } from '~/src/ui/components/form';
import { Layout } from '~/src/ui/layouts/layout/Layout';

interface FormInputEditProps {
  field: FormConfigField;
  size?: 'medium' | 'small';

  onChange: (data: {
    label?: string;
    placeholder?: string;
    description?: string;
  }) => void;
}

export const FormInputEdit = ({
  field,
  size,
  onChange,
}: FormInputEditProps) => {
  const { t } = useI18n('formBuilder');
  const i18n = useI18n('form');

  const { label, placeholder, description } = field;
  const defaults = getFieldDefaults(field, i18n);

  return (
    <Layout column gap="5">
      <Form
        size={size}
        mode="onChange"
        onChange={onChange}
        config={{
          fields: [
            {
              name: 'label',
              label: t('label'),
              placeholder: defaults.label,
              type: 'text',
              defaultValue: label,
            },
            {
              name: 'placeholder',
              label: t('placeholder'),
              placeholder: defaults.placeholder,
              defaultValue: placeholder,
              type: 'text',
            },
            {
              name: 'description',
              label: t('description'),
              type: 'text',
              placeholder: defaults.description,
              defaultValue: description,
            },
            /*{
              name: 'width',
              label: 'Width',
              type: 'select',
              options: [
                { value: '', label: '100%' },
                { value: 'half', label: '50%' },
                { value: 'third', label: '33%' },
                { value: 'fourth', label: '25%' },
              ],
              defaultValue: width,
              width: 'half',
            },
            {
              name: 'breakBefore',
              label: 'Put on new line',
              type: 'boolean',
              defaultValue: field.breakBefore,
              width: 'half',
            },*/
          ],
        }}
      />
    </Layout>
  );
};