'use client';

import type { RefObject } from 'react';

import { FormField, SelectPopover } from '@/components/form';

const options = [
  { value: 'yolo', label: 'Road Defect Detection' },
  { value: 'yoloe', label: 'YOLOE Open-Vocabulary Detection' },
  { value: 'yoloe_trained_vl', label: 'YOLOE With Vision Language Model' },
  { value: 'culvert_detection', label: 'Culvert Detection' },
  { value: 'combined', label: 'Road Defect Detection with vl' },
  { value: 'yoloe_seg', label: 'Improved Road Defect Detection' },
] as const;

interface UploadSettingsSectionProps {
  value: string;
  onValueChange: (value: string) => void;
  disabled?: boolean;
  portalContainer?: RefObject<HTMLDivElement | null>;
}

export function UploadSettingsSection({
  value,
  onValueChange,
  disabled = false,
  portalContainer,
}: UploadSettingsSectionProps) {
  return (
    <section className="space-y-3">
      <div>
        <h2 className="text-sm font-semibold text-foreground">
          Upload Settings
        </h2>
        <p className="text-xs text-muted-foreground">
          Select the detection workflow for this upload.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
        <FormField id="detection-mode" label="Detection Mode">
          <SelectPopover
            options={options}
            value={value}
            onValueChange={onValueChange}
            disabled={disabled}
            portalContainer={portalContainer}
            placeholder="Select method"
            searchPlaceholder="Search methods"
            emptyMessage="No methods found."
          />
        </FormField>
      </div>
    </section>
  );
}