import { MoodleGPTConfig } from '../hooks/useConfig';
import { useModel } from '../hooks/useModel';

interface Props {
  config: MoodleGPTConfig;
  onChange: (key: keyof MoodleGPTConfig, value: MoodleGPTConfig[keyof MoodleGPTConfig]) => void;
}

export function OptionsGrid({ config, onChange }: Props) {
  const { isCurrentVersionSupportingImages } = useModel();

  const toggleRow = (id: keyof MoodleGPTConfig, label: string, visible = true) => {
    if (!visible) return null;
    return (
      <div class="flex justify-between items-center">
        <label htmlFor={id} class="text-sm text-text-primary">
          {label}
        </label>
        <label class="toggle-switch">
          <input
            id={id}
            type="checkbox"
            checked={!!config[id]}
            onChange={e => onChange(id, (e.target as HTMLInputElement).checked)}
          />
          <span class="slider"></span>
        </label>
      </div>
    );
  };

  const isClipboard = config.mode === 'clipboard';

  return (
    <div class="bg-panel-bg backdrop-blur-md border border-panel-border rounded-2xl p-4 shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] grid grid-cols-2 gap-4">
      {toggleRow('logs', 'Console logs')}
      {toggleRow('title', 'Title hint')}
      {toggleRow('cursor', 'Cursor hint')}
      {toggleRow('timeout', 'Timeout')}
      {toggleRow('typing', 'Typing effect', !isClipboard)}
      {toggleRow('mouseover', 'Hover effect', !isClipboard)}
      {toggleRow('infinite', 'Infinite try')}
      {toggleRow('history', 'History')}
      {toggleRow('includeImages', 'Images (GPT-4)', isCurrentVersionSupportingImages(config.model))}
    </div>
  );
}
