import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
} from "./ui/select";
import {
  CODE_GENERATION_MODEL_DESCRIPTIONS,
  CodeGenerationModel,
} from "../lib/models";
import { Badge } from "./ui/badge";
import { IS_RUNNING_ON_CLOUD } from "../config";

interface Props {
  codeGenerationModel: CodeGenerationModel;
  setCodeGenerationModel: (codeGenerationModel: CodeGenerationModel) => void;
  shouldDisableUpdates?: boolean;
}

function ModelSettingsSection({
  codeGenerationModel,
  setCodeGenerationModel,
  shouldDisableUpdates = false,
}: Props) {
  return (
    <div className="flex flex-col gap-y-2 justify-between text-sm">
      <div className="grid grid-cols-3 items-center gap-4">
        <span>AI Model:</span>
        <Select
          value={codeGenerationModel}
          onValueChange={(value: string) =>
            setCodeGenerationModel(value as CodeGenerationModel)
          }
          disabled={shouldDisableUpdates}
        >
          <SelectTrigger className="col-span-2" id="output-settings-js">
            <span className="font-semibold">
              {CODE_GENERATION_MODEL_DESCRIPTIONS[codeGenerationModel].name}
            </span>
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {Object.values(CodeGenerationModel).map((model) => (
                <SelectItem key={model} value={model}>
                  <div className="flex flex-col">
                    <div className="flex items-center">
                      <span className="font-semibold">
                        {CODE_GENERATION_MODEL_DESCRIPTIONS[model].name}
                      </span>
                      {!IS_RUNNING_ON_CLOUD &&
                        CODE_GENERATION_MODEL_DESCRIPTIONS[model].inBeta && (
                          <Badge className="ml-2" variant="secondary">
                            Beta
                          </Badge>
                        )}
                    </div>
                  </div>
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

export default ModelSettingsSection;