import { useState } from "react";
import Menu from "./menu";
import Read from "./read";
import Toy from "./bili";
import Message from "~components/ui/message";
import { clsn } from "~utils";
import "assets/global.less";
import styles from "./popup.module.less";

function IndexPopup() {
  const [tab, setTab] = useState<string>();

  const onBack = () => {
    setTab(undefined);
  }

  const onClickMenu = (value: string) => {
    if (value === "options") {
      chrome.runtime.openOptionsPage();
      return;
    }
    else if (value === "home") {
      chrome.storage.local.get(["siteUrl"]).then((res) => {
        if (res.siteUrl) {
          chrome.tabs.create({ url: res.siteUrl });
        }
      });

      return;
    }

    setTab(value);
  }

  const renderBody = () => {
    if (tab === "read") {
      return <Read onBack={onBack} />;
    }
    if (tab === "toy") {
      return <Toy onBack={onBack} />;
    }

    return <Menu onClick={onClickMenu} />;
  }

  return (
    <>
      <div className={clsn(styles.root, tab && styles.hasTab)}>
        {renderBody()}
      </div>
      <Message />
    </>
  );
}

export default IndexPopup;