import { Component } from "solid-js"
import { Dialog } from "@opencode-ai/ui/dialog"
import { Tabs } from "@opencode-ai/ui/tabs"
import { Icon } from "@opencode-ai/ui/icon"
import { useLanguage } from "@/context/language"
import { usePlatform } from "@/context/platform"
import { SettingsGeneral } from "./settings-general"
import { SettingsKeybinds } from "./settings-keybinds"
import { SettingsPermissions } from "./settings-permissions"
import { SettingsProviders } from "./settings-providers"
import { SettingsModels } from "./settings-models"
import { SettingsAgents } from "./settings-agents"
import { SettingsCommands } from "./settings-commands"
import { SettingsMcp } from "./settings-mcp"

export const DialogSettings: Component = () => {
  const language = useLanguage()
  const platform = usePlatform()

  return (
    <Dialog size="x-large">
      <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
        <Tabs.List>
          <div
            style={{
              display: "flex",
              "flex-direction": "column",
              "justify-content": "space-between",
              height: "100%",
              width: "100%",
            }}
          >
            <div
              style={{
                display: "flex",
                "flex-direction": "column",
                gap: "12px",
                width: "100%",
                "padding-top": "12px",
              }}
            >
              <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
              <div style={{ display: "flex", "flex-direction": "column", gap: "6px", width: "100%" }}>
                <Tabs.Trigger value="general">
                  <Icon name="sliders" />
                  {language.t("settings.tab.general")}
                </Tabs.Trigger>
                <Tabs.Trigger value="shortcuts">
                  <Icon name="keyboard" />
                  {language.t("settings.tab.shortcuts")}
                </Tabs.Trigger>
              </div>
            </div>
            <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
              <span>OpenCode Desktop</span>
              <span class="text-11-regular">v{platform.version}</span>
            </div>
          </div>
          {/* <Tabs.SectionTitle>Server</Tabs.SectionTitle> */}
          {/* <Tabs.Trigger value="permissions"> */}
          {/*   <Icon name="checklist" /> */}
          {/*   Permissions */}
          {/* </Tabs.Trigger> */}
          {/* <Tabs.Trigger value="providers"> */}
          {/*   <Icon name="server" /> */}
          {/*   Providers */}
          {/* </Tabs.Trigger> */}
          {/* <Tabs.Trigger value="models"> */}
          {/*   <Icon name="brain" /> */}
          {/*   Models */}
          {/* </Tabs.Trigger> */}
          {/* <Tabs.Trigger value="agents"> */}
          {/*   <Icon name="task" /> */}
          {/*   Agents */}
          {/* </Tabs.Trigger> */}
          {/* <Tabs.Trigger value="commands"> */}
          {/*   <Icon name="console" /> */}
          {/*   Commands */}
          {/* </Tabs.Trigger> */}
          {/* <Tabs.Trigger value="mcp"> */}
          {/*   <Icon name="mcp" /> */}
          {/*   MCP */}
          {/* </Tabs.Trigger> */}
        </Tabs.List>
        <Tabs.Content value="general" class="no-scrollbar">
          <SettingsGeneral />
        </Tabs.Content>
        <Tabs.Content value="shortcuts" class="no-scrollbar">
          <SettingsKeybinds />
        </Tabs.Content>
        {/* <Tabs.Content value="permissions" class="no-scrollbar"> */}
        {/*   <SettingsPermissions /> */}
        {/* </Tabs.Content> */}
        {/* <Tabs.Content value="providers" class="no-scrollbar"> */}
        {/*   <SettingsProviders /> */}
        {/* </Tabs.Content> */}
        {/* <Tabs.Content value="models" class="no-scrollbar"> */}
        {/*   <SettingsModels /> */}
        {/* </Tabs.Content> */}
        {/* <Tabs.Content value="agents" class="no-scrollbar"> */}
        {/*   <SettingsAgents /> */}
        {/* </Tabs.Content> */}
        {/* <Tabs.Content value="commands" class="no-scrollbar"> */}
        {/*   <SettingsCommands /> */}
        {/* </Tabs.Content> */}
        {/* <Tabs.Content value="mcp" class="no-scrollbar"> */}
        {/*   <SettingsMcp /> */}
        {/* </Tabs.Content> */}
      </Tabs>
    </Dialog>
  )
}
