import { Notice } from '../../core/Notice';
import { FormGrid, SelectField, TextField } from '../../forms';
import type { DownloadExportMode, DownloadOption, DownloadScope } from './types';

export type ExportTargetFieldsProps = {
  scope: DownloadScope;
  mode: DownloadExportMode;
  name: string;
  target: string;
  availableModes: DownloadOption[];
  targetOptions: DownloadOption[];
  needsTarget: boolean;
  showBatchExportNotice: boolean;
  labels: {
    scope: string;
    name: string;
    mode: string;
    target: string;
    chooseTarget: string;
    canvas: string;
    views: string;
    drawingAreas: string;
    layersElements: string;
    batchExportPremium: string;
  };
  onScopeChange: (scope: DownloadScope) => void;
  onModeChange: (mode: DownloadExportMode) => void;
  onNameChange: (name: string) => void;
  onTargetChange: (target: string) => void;
};

export function ExportTargetFields({
  scope,
  mode,
  name,
  target,
  availableModes,
  targetOptions,
  needsTarget,
  showBatchExportNotice,
  labels,
  onScopeChange,
  onModeChange,
  onNameChange,
  onTargetChange,
}: ExportTargetFieldsProps) {
  return (
    <>
      <FormGrid columns={2}>
        <SelectField
          label={labels.scope}
          required
          value={scope}
          options={[
            { value: 'Canvas', label: labels.canvas },
            { value: 'Views', label: labels.views },
            { value: 'Drawing areas', label: labels.drawingAreas },
            { value: 'Layers and elements', label: labels.layersElements },
          ]}
          onValueChange={(value) => onScopeChange(value as DownloadScope)}
        />
        <TextField label={labels.name} required value={name} onValueChange={onNameChange} />
      </FormGrid>

      {scope !== 'Canvas' ? (
        <>
          <SelectField
            label={labels.mode}
            required
            value={mode}
            options={availableModes as any}
            onValueChange={(value) => onModeChange(value as DownloadExportMode)}
          />
          {showBatchExportNotice ? (
            <Notice variant="neutral">{labels.batchExportPremium}</Notice>
          ) : null}
        </>
      ) : null}

      {needsTarget ? (
        <SelectField
          label={labels.target}
          required
          value={target}
          options={[{ value: '', label: labels.chooseTarget }, ...targetOptions] as any}
          onValueChange={onTargetChange}
        />
      ) : null}
    </>
  );
}
