import { useState } from "react";
import Read from "~components/biz/read";
import Toy from "~components/biz/toy";
import Say from "~components/biz/say";
import Message from "~components/ui/message";
import { clsn } from "~utils";

import "~assets/global.less";
import styles from "./sidepanel.module.less";

const initialType = new URLSearchParams(location.search).get("type") || "read";

const tabItems = [
  { title: "在看", value: "read" },
  { title: "手办", value: "toy" },
  { title: "语录", value: "say" },
];

function SidePanel() {
  const [type, setType] = useState(initialType);

  return (
    <div className={styles.root}>
      <nav className={styles.nav}>
        {tabItems.map((item) => (
          <a key={item.value}
            className={clsn(type === item.value && styles.active)}
            onClick={() => setType(item.value)}
          >
            {item.title}
          </a>
        ))}
      </nav>
      {type === "read" && <Read />}
      {type === "toy" && <Toy />}
      {type === "say" && <Say />}
      <Message />
    </div>
  );
}

export default SidePanel;