import {
  Dropdown,
  InputSection,
  ParamControls,
} from "@elvis/ui";

import { MODELS } from "./models";

import type { ModelSettings } from "./types";


interface SidebarProps {
  modelSettings: ModelSettings;
  setModelSettings: (settings: ModelSettings) => void;
}

export default function Sidebar({ 
  modelSettings, 
  setModelSettings,
}: SidebarProps) {
  const active = MODELS.find((model) => model.id === modelSettings.type) ?? MODELS[0];
  return (
            <InputSection label="Model">
              <Dropdown
                label="Type"
                options={MODELS.map((model) => model.label)}
                activeOption={active.label}
                onChange={(label: string) => {
                  const model = MODELS.find((m) => m.label === label) ?? MODELS[0];
                  setModelSettings({ type: model.id, params: {} });
                }}
              />
              <ParamControls
                model={active}
                values={modelSettings.params}
                onChange={(params) => setModelSettings({ ...modelSettings, params })}
                showQuickSettings={false}
              />
            </InputSection>
  )
}