import { SectionCard } from '../../core/SectionCard';
import { CheckboxField, FormGrid, SelectField, TextField } from '../../forms';
import type { DownloadUnit } from './types';

export type PdfOptionsPanelProps = {
  cropMark: boolean;
  marksOffset: string;
  marksBleed: string;
  marksMargin: string;
  marksUnit: DownloadUnit;
  labels: {
    cropMarks: string;
    offset: string;
    bleed: string;
    margin: string;
    unit: string;
    pixels: string;
    centimeters: string;
    millimeters: string;
    inches: string;
  };
  onCropMarkChange: (checked: boolean) => void;
  onMarksOffsetChange: (value: string) => void;
  onMarksBleedChange: (value: string) => void;
  onMarksMarginChange: (value: string) => void;
  onMarksUnitChange: (value: DownloadUnit) => void;
};

export function PdfOptionsPanel({
  cropMark,
  marksOffset,
  marksBleed,
  marksMargin,
  marksUnit,
  labels,
  onCropMarkChange,
  onMarksOffsetChange,
  onMarksBleedChange,
  onMarksMarginChange,
  onMarksUnitChange,
}: PdfOptionsPanelProps) {
  const unitOptions = [
    { value: 'px', label: labels.pixels },
    { value: 'cm', label: labels.centimeters },
    { value: 'mm', label: labels.millimeters },
    { value: 'in', label: labels.inches },
  ];

  return (
    <SectionCard padding="sm">
      <CheckboxField checked={cropMark} label={labels.cropMarks} boxed={false} onCheckedChange={onCropMarkChange} />
      {cropMark ? (
        <FormGrid className="ask-mt-3" columns={2}>
          <TextField type="number" step="any" label={labels.offset} required value={marksOffset} onValueChange={onMarksOffsetChange} />
          <TextField type="number" step="any" label={labels.bleed} required value={marksBleed} onValueChange={onMarksBleedChange} />
          <TextField type="number" step="any" label={labels.margin} required value={marksMargin} onValueChange={onMarksMarginChange} />
          <SelectField label={labels.unit} required value={marksUnit} options={unitOptions} onValueChange={(value) => onMarksUnitChange(value as DownloadUnit)} />
        </FormGrid>
      ) : null}
    </SectionCard>
  );
}
