import type { FunctionalComponent } from 'preact';

import { SectionCard } from '../../core';
import { FormGrid, ImageField, NumberField, TextField } from '../../forms';

type ElementDetailsFieldsProps = {
  t: (key: string, fallback?: string) => string;
  form: any;
  isEdit?: boolean;
};

export const ElementDetailsFields: FunctionalComponent<ElementDetailsFieldsProps> = ({ t, form, isEdit }) => (
  <SectionCard
    title={t('elements.details.title', 'Element details')}
    description={t('elements.details.helper', 'Define the base metadata and media used across all variations.')}
  >
    <FormGrid columns={2} className="max-lg:ask-grid-cols-1">
      <TextField
        label={t('common.name', 'Name')}
        required
        value={String((form.values as any).name ?? '')}
        disabled={Boolean(isEdit)}
        onValueChange={(value) => form.setValue('name', value)}
      />

      <TextField
        label={t('elements.form.category', 'Category')}
        value={String((form.values as any).category ?? '')}
        onValueChange={(value) => form.setValue('category', value)}
      />

      <ImageField
        fieldClassName="ask-col-span-2 max-lg:ask-col-span-1"
        label={String((form.values as any).type ?? '').trim() === 'product-3d'
          ? t('elements.form.previewImage', 'Element preview')
          : t('elements.form.elementImage', 'Element image')}
        hint={String((form.values as any).type ?? '').trim() === 'product-3d'
          ? t('elements.form.previewImageHint', 'Used as the element thumbnail. The 3D model is configured below.')
          : t('elements.form.elementImageHint', 'Used as the element thumbnail and as its visual on the canvas.')}
        value={String((form.values as any).image ?? '').trim() || String((form.values as any).icon ?? '').trim()}
        placeholder="https://…"
        showPreview
        onValueChange={(value) => {
          form.setValue('image', value);
          form.setValue('icon', '');
        }}
      />

      <NumberField
        label={t('common.price', 'Price')}
        value={(form.values as any).price ?? 0}
        inputMode="decimal"
        emptyValue={0}
        onValueChange={(value) => form.setValue('price', value ?? 0)}
      />
    </FormGrid>
  </SectionCard>
);
