import type { AreaRead, DatasetCreateResponse } from '../../types'

interface VectorControlsProps {
  areas: AreaRead[]
  availableVectorTargets: DatasetCreateResponse[]
  selectedClipAreaId: string
  selectedIntersectTargetId: string
  onSetSelectedClipAreaId: (value: string) => void
  onSetSelectedIntersectTargetId: (value: string) => void
  onRunVectorClip: () => void
  onRunVectorBuffer: () => void
  onRunVectorIntersect: () => void
}

export function VectorControls({
  areas,
  availableVectorTargets,
  selectedClipAreaId,
  selectedIntersectTargetId,
  onSetSelectedClipAreaId,
  onSetSelectedIntersectTargetId,
  onRunVectorClip,
  onRunVectorBuffer,
  onRunVectorIntersect,
}: VectorControlsProps) {
  return (
    <div className="dataset-tool-panel vector-tool-panel">
      <h3>Vector operations</h3>
      <div className="dataset-tool-group">
        <h4 className="dataset-tool-heading">Clip vector</h4>
        <p className="dataset-tool-helper">Clip features to the selected project area.</p>
        <div className="dataset-tool-grid">
          <label className="dataset-tool-field">
            <span className="dataset-tool-label">Clip area</span>
            <select value={selectedClipAreaId} onChange={(event) => onSetSelectedClipAreaId(event.target.value)}>
              {areas.map((area) => (
                <option key={area.id} value={area.id}>
                  {area.name}
                </option>
              ))}
            </select>
          </label>
        </div>
        <div className="dataset-tool-action-row">
          <button type="button" onClick={onRunVectorClip} disabled={areas.length === 0}>
            Run clip
          </button>
        </div>
      </div>
      <div className="dataset-tool-group">
        <h4 className="dataset-tool-heading">Buffer vector</h4>
        <p className="dataset-tool-helper">Create a 25m buffer using the existing vector operation defaults.</p>
        <div className="dataset-tool-action-row">
          <button type="button" onClick={onRunVectorBuffer}>
            Run buffer (25m)
          </button>
        </div>
      </div>
      <div className="dataset-tool-group">
        <h4 className="dataset-tool-heading">Intersect vector</h4>
        <p className="dataset-tool-helper">Intersect with another persisted vector dataset.</p>
        <div className="dataset-tool-grid">
          <label className="dataset-tool-field">
            <span className="dataset-tool-label">Intersect target</span>
            <select value={selectedIntersectTargetId} onChange={(event) => onSetSelectedIntersectTargetId(event.target.value)}>
              <option value="">auto first vector</option>
              {availableVectorTargets.map((target) => (
                <option key={target.id} value={target.id}>
                  {target.name}
                </option>
              ))}
            </select>
            <span className="dataset-tool-helper">Leave automatic to use the first available vector target.</span>
          </label>
        </div>
        <div className="dataset-tool-action-row">
          <button type="button" onClick={onRunVectorIntersect}>
            Run intersect
          </button>
        </div>
      </div>
    </div>
  )
}