import React from 'react'
import { Select, Toggle, FormGroup } from './bootstrap'
import { PdfExportOptions } from './PdfExportOptions'

interface PdfExportOptionsFormProps {
  /** Current options */
  options: PdfExportOptions
  /** Called when any option changes */
  onChange: (options: PdfExportOptions) => void
  /** If true, form inputs are disabled */
  disabled?: boolean
}

/**
 * Form component for PDF export options.
 * Pure UI component with no side effects or job management logic.
 */
export function PdfExportOptionsForm(props: PdfExportOptionsFormProps) {
  const { options, onChange, disabled } = props

  const handleOptionChange = <K extends keyof PdfExportOptions>(key: K, value: PdfExportOptions[K]) => {
    onChange({ ...options, [key]: value })
  }

  const commonInputStyle: React.CSSProperties = disabled ? { pointerEvents: "none", opacity: 0.5 } : {}

  return (
    <>
      <FormGroup label={T`Page Size`}>
        <div style={commonInputStyle}>
          <Select
            value={options.page_size}
            onChange={(value) => handleOptionChange("page_size", value as PdfExportOptions["page_size"])}
            options={[
              { value: "Letter", label: T`Letter (8.5 x 11 in)` },
              { value: "A4", label: T`A4 (210 x 297 mm)` },
              { value: "A3", label: T`A3 (297 x 420 mm)` }
            ]}
          />
        </div>
      </FormGroup>

      <FormGroup label={T`Orientation`}>
        <div style={commonInputStyle}>
          <Toggle
            value={options.orientation}
            onChange={(value) => handleOptionChange("orientation", value as PdfExportOptions["orientation"])}
            options={[
              { value: "portrait", label: T`Portrait` },
              { value: "landscape", label: T`Landscape` }
            ]}
          />
        </div>
      </FormGroup>

      <FormGroup label={T`Margins`}>
        <div style={commonInputStyle}>
          <Select
            value={options.margins}
            onChange={(value) => handleOptionChange("margins", Number(value))}
            options={[
              { value: 0.5, label: T`Standard (0.5 in/12.7 mm)` },
              { value: 0.25, label: T`Narrow (0.25 in/6.35 mm)` },
              { value: 1.0, label: T`Large (1.0 in/25.4 mm)` },
              { value: 0, label: T`None` }
            ]}
          />
        </div>
      </FormGroup>

      <FormGroup label={T`Text and Element Size`}>
        <div style={commonInputStyle}>
          <Select
            value={options.scale}
            onChange={(value) => handleOptionChange("scale", Number(value))}
            options={[
              { value: 0.5, label: T`Smallest (shows most content)` },
              { value: 0.75, label: T`Smaller (shows more content)` },
              { value: 1, label: T`Normal (recommended fit)` },
              { value: 1.5, label: T`Larger (shows less content)` },
            ]}
          />
        </div>
      </FormGroup>
    </>
  )
}