import { FormGrid } from '../../forms/FormGrid';
import { CheckboxField, NumberField, SelectField, TextField } from '../../forms';
import type { ViewEngineKind, ViewFormValues, ViewPreset, ViewUnit } from './types';

export type ViewEditorFieldsProps = {
  form: ViewFormValues;
  presets: ViewPreset[];
  onPresetChange: (presetId: string) => void;
  onEngineChange: (engine: ViewEngineKind) => void;
  onNameChange: (value: string) => void;
  onUnitChange: (unit: ViewUnit) => void;
  onDpiChange: (value: number | undefined) => void;
  onWidthChange: (value: number | undefined) => void;
  onHeightChange: (value: number | undefined) => void;
  onPhysicalEnabledChange: (enabled: boolean) => void;
  onPhysicalSizeChange: (patch: Partial<ViewFormValues['physicalSize']>) => void;
  t: (key: string, fallback?: string, values?: Record<string, any>) => string;
};

export function ViewEditorFields({
  form,
  presets,
  onPresetChange,
  onEngineChange,
  onNameChange,
  onUnitChange,
  onDpiChange,
  onWidthChange,
  onHeightChange,
  onPhysicalEnabledChange,
  onPhysicalSizeChange,
  t,
}: ViewEditorFieldsProps) {
  return (
    <div className="ask-flex ask-flex-col ask-gap-4">
      <SelectField
        label={t('views.engine', 'View type')}
        required
        value={form.engine}
        options={[
          { value: 'fabric', label: t('views.engine.fabric', '2D - Fabric') },
          { value: '3d', label: t('views.engine.3d', '3D - Babylon') },
        ]}
        onValueChange={(value) => onEngineChange(value as ViewEngineKind)}
      />

      <SelectField
        label={t('ui.preset', 'Preset')}
        required
        value={form.presetId}
        options={presets.map((preset) => ({ value: preset.id, label: t((preset as any).labelKey, preset.label) }))}
        onValueChange={onPresetChange}
      />

      <TextField
        label={t('ui.name', 'Name')}
        required
        value={form.name}
        placeholder={t('views.defaultNameFront', 'Front')}
        onValueChange={onNameChange}
      />

      <FormGrid columns={2}>
        <SelectField
          label={t('ui.unit', 'Unit')}
          required
          value={form.unit}
          options={[
            { value: 'px', label: 'px' },
            { value: 'mm', label: 'mm' },
            { value: 'cm', label: 'cm' },
            { value: 'in', label: 'in' },
          ]}
          onValueChange={(value) => onUnitChange(value as ViewUnit)}
        />
        <NumberField
          label={t('ui.dpi', 'DPI')}
          required
          min={10}
          max={1200}
          value={form.dpi}
          onValueChange={onDpiChange}
        />
      </FormGrid>

      <FormGrid columns={2}>
        <NumberField
          label={t('ui.width', 'Width')}
          required
          min={1}
          value={form.width}
          onValueChange={onWidthChange}
        />
        <NumberField
          label={t('ui.height', 'Height')}
          required
          min={1}
          value={form.height}
          onValueChange={onHeightChange}
        />
      </FormGrid>

      <div className="ask-flex ask-flex-col ask-gap-3 ask-border-t ask-border-borderSubtle ask-pt-4">
        <div className="ask-text-[12px] ask-font-semibold ask-text-textMain">
          {t('views.physicalCalibration', 'Physical calibration')}
        </div>

        <CheckboxField
          label={t('views.physicalCalibrationEnabled', 'Use physical calibration')}
          checked={form.physicalEnabled}
          onCheckedChange={onPhysicalEnabledChange}
        />

        {form.physicalEnabled ? (
          <>
            <FormGrid columns={2}>
              <NumberField
                label={t('views.physicalWidth', 'Physical width')}
                required
                min={0.01}
                step="any"
                value={form.physicalSize.width}
                onValueChange={(value) => onPhysicalSizeChange({ width: value })}
              />
              <NumberField
                label={t('views.physicalHeight', 'Physical height')}
                required
                min={0.01}
                step="any"
                value={form.physicalSize.height}
                onValueChange={(value) => onPhysicalSizeChange({ height: value })}
              />
            </FormGrid>

            <FormGrid columns={2}>
              <SelectField
                label={t('views.physicalUnit', 'Physical unit')}
                required
                value={form.physicalSize.unit}
                options={[
                  { value: 'mm', label: 'mm' },
                  { value: 'cm', label: 'cm' },
                  { value: 'in', label: 'in' },
                ]}
                onValueChange={(value) => onPhysicalSizeChange({ unit: value as ViewFormValues['physicalSize']['unit'] })}
              />
              <NumberField
                label={t('views.minimumImageDpi', 'Minimum image DPI')}
                required
                min={1}
                max={1200}
                step="1"
                value={form.physicalSize.recommendedDpi ?? 150}
                onValueChange={(value) => onPhysicalSizeChange({ recommendedDpi: value })}
              />
            </FormGrid>
          </>
        ) : null}
      </div>
    </div>
  );
}
