import "@/index.css";

import { useState } from "react";
import { useOpenExternal, useRequestModal } from "skybridge/web";
import { CreateStoreTab } from "./tabs/create-store-tab.js";
import { DataLlmTab } from "./tabs/data-llm-tab.js";
import { HomeTab } from "./tabs/home-tab.js";
import { ImageTab } from "./tabs/image-tab/index.js";
import { ToolInfoTab } from "./tabs/tool-info-tab.js";
import { UseCallToolTab } from "./tabs/use-call-tool-tab.js";
import { UseDisplayModeTab } from "./tabs/use-display-mode-tab.js";
import { UseFilesTab } from "./tabs/use-files-tab.js";
import { UseLayoutTab } from "./tabs/use-layout-tab.js";
import { UseOpenExternalTab } from "./tabs/use-open-external-tab.js";
import { UseRequestModalTab } from "./tabs/use-request-modal-tab.js";
import { UseSendFollowUpMessageTab } from "./tabs/use-send-follow-up-message-tab.js";
import { UseSetOpenInAppUrlTab } from "./tabs/use-set-open-in-app-url.js";
import { UseUserTab } from "./tabs/use-user-tab.js";
import { UseViewStateTab } from "./tabs/use-view-state-tab.js";

const TABS = {
  Home: { docPath: "", Component: HomeTab },
  createStore: { docPath: "create-store", Component: CreateStoreTab },
  "data-llm": { docPath: "data-llm", Component: DataLlmTab },
  image: { docPath: "image", Component: ImageTab },
  useCallTool: { docPath: "use-call-tool", Component: UseCallToolTab },
  useDisplayMode: { docPath: "use-display-mode", Component: UseDisplayModeTab },
  useFiles: { docPath: "use-files", Component: UseFilesTab },
  useLayout: { docPath: "use-layout", Component: UseLayoutTab },
  useOpenExternal: {
    docPath: "use-open-external",
    Component: UseOpenExternalTab,
  },
  useRequestModal: {
    docPath: "use-request-modal",
    Component: UseRequestModalTab,
  },
  useSendFollowUpMessage: {
    docPath: "use-send-follow-up-message",
    Component: UseSendFollowUpMessageTab,
  },
  useSetOpenInAppUrl: {
    docPath: "use-set-open-in-app-url",
    Component: UseSetOpenInAppUrlTab,
  },
  useToolInfo: { docPath: "use-tool-info", Component: ToolInfoTab },
  useUser: { docPath: "use-user", Component: UseUserTab },
  useViewState: { docPath: "use-view-state", Component: UseViewStateTab },
};

type Tab = keyof typeof TABS;

function Widget() {
  const [tab, setTab] = useState<Tab>("Home");
  const openExternal = useOpenExternal();
  const { isOpen, params } = useRequestModal();

  const { docPath, Component } = TABS[tab];

  // modal content need to be set at root
  // opening is triggered by UseRequestModalTab
  if (isOpen) {
    let message = "No message provided";
    if (typeof params?.message === "string") {
      message = params.message;
    }
    return (
      <div
        className="container"
        style={{ textAlign: "center", fontSize: "1.5rem" }}
      >
        {message}
      </div>
    );
  }

  return (
    <div className="container">
      <nav className="tabs">
        {(Object.keys(TABS) as Tab[]).map((t) => (
          <button
            key={t}
            type="button"
            className={`tab ${tab === t ? "active" : ""}`}
            onClick={() => setTab(t)}
          >
            {t}
          </button>
        ))}
      </nav>

      <Component />

      <div style={{ marginTop: "1.75rem", textAlign: "right" }}>
        <button
          type="button"
          className="btn btn-outline muted btn-small"
          onClick={() =>
            openExternal(`https://docs.skybridge.tech/api-reference/${docPath}`)
          }
        >
          ↗ See in docs
        </button>
      </div>
    </div>
  );
}

export default Widget;
