"use client";

import { useEffect, useState } from "react";
import { ComponentViewer } from "./ComponentViewer";
import { Sidebar } from "./Sidebar";
import { FaReact, FaAlignJustify, FaFillDrip } from "react-icons/fa";
import { Item } from "../interfaces/Item";
import { Docs } from "./Docs";
import { StringParam, useQueryParam } from "use-query-params";
import { QueryParamProvider } from "use-query-params";
import { WindowHistoryAdapter } from "use-query-params/adapters/window";

interface Props {
  items: Item[];
  defaultTheme?: "light" | "dark";
}

function ComponentBookReact({ items, defaultTheme = "light" }: Props) {
  const [name, setName] = useQueryParam("name", StringParam);
  const [group, setGroup] = useQueryParam("group", StringParam);
  const [scope, setScope] = useQueryParam("scope", StringParam);

  const [theme, setTheme] = useState(defaultTheme);
  const [showSidebar, setShowSidebar] = useState(false);
  const [componentLoading, setComponentLoading] = useState(false);

  useEffect(() => {
    setShowSidebar(window?.innerWidth > 1024);
  }, []);

  function setComponentSelectedHandler(item: Item) {
    setComponentLoading(true);

    setName(item.name);
    setGroup(item.group);
    setScope(item.scope);

    setTimeout(() => {
      setComponentLoading(false);
    }, 200);
  }

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  const componentSelected = items.find(
    (item) => name === item.name && group === item.group && scope === item.scope
  );

  return (
    <div className="component-book" cb-theme={theme}>
      <div className="component-book cb-w-screen cb-h-screen bg-white dark:cb-bg-slate-900">
        <div className="component-book cb-select-none cb-w-full cb-h-[60px] cb-border cb-border-solid cb-border-transparent cb-border-b-slate-200 dark:cb-border-b-slate-700 cb-flex cb-justify-between cb-items-center cb-px-5 lg:pr-10 lg:cb-pl-0 cb-bg-white dark:cb-bg-slate-900">
          <div
            className="lg:cb-hidden component-book cb-cursor-pointer cb-p-2 cb-flex cb-justify-center cb-items-center hover:cb-bg-slate-200 dark:hover:cb-bg-slate-800 cb-cursor-pointer dark:cb-text-white"
            onClick={() => setShowSidebar(!showSidebar)}
          >
            <FaAlignJustify />
          </div>

          <div className="component-book cb-flex cb-justify-between cb-items-center cb-gap-6 lg:cb-w-[250px] lg:cb-pl-5">
            <div className="component-book cb-flex cb-gap-2 cb-items-center cb-text-black dark:cb-text-white">
              <div className="component-book cb-p-1 cb-border cb-border-solid cb-border-black dark:cb-border-white cb-rounded-lg cb-flex cb-justify-center cb-items-center">
                <FaReact />
              </div>
              <div className="component-book cb-font-semibold cb-text-sm">
                Component Book
              </div>
            </div>

            <div
              className="cb-hidden component-book cb-cursor-pointer cb-p-2 lg:cb-flex cb-justify-center cb-items-center hover:cb-bg-slate-200 dark:hover:cb-bg-slate-800 cb-cursor-pointer dark:cb-text-white"
              onClick={() => setShowSidebar(!showSidebar)}
            >
              <FaAlignJustify />
            </div>
          </div>

          <div
            className="component-book cb-cursor-pointer cb-p-2 cb-flex cb-justify-center cb-items-center hover:cb-bg-slate-200 dark:hover:cb-bg-slate-800 cb-cursor-pointer cb-text-lg dark:cb-text-white"
            onClick={toggleTheme}
          >
            <FaFillDrip />
          </div>
        </div>
        <div className="component-book cb-w-screen cb-h-[calc(100vh-60px)] cb-flex">
          {showSidebar && (
            <div className="component-book cb-w-full lg:cb-w-[250px] cb-h-full lg:cb-border lg:cb-border-solid lg:cb-border-transparent lg:cb-border-r-slate-200 dark:lg:cb-border-r-slate-700 cb-overflow-x-hidden cb-overflow-y-auto cb-select-none">
              <Sidebar
                items={items}
                componentSelected={componentSelected}
                setComponentSelected={setComponentSelectedHandler}
              />
            </div>
          )}
          <div className="component-book cb-flex-1 cb-h-full cb-overflow-x-hidden cb-overflow-y-auto">
            <div className="component-book cb-m-5">
              {!componentSelected && <Docs />}
              {componentSelected && !componentLoading && (
                <ComponentViewer
                  component={componentSelected.component}
                  props={componentSelected.props}
                  options={componentSelected.options}
                />
              )}
              {componentLoading && (
                <div className="component-book cb-w-full cb-flex cb-justify-center cb-text-black cb-items-center cb-h-[100px]">
                  <div className="dark:cb-text-white">Carregando...</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export const ComponentBook = (props: Props) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 500);
  }, []);

  if (loading) {
    return (
      <div
        className={`component-book cb-w-screen cb-h-screen cb-flex cb-justify-center cb-items-center ${
          props.defaultTheme === "light"
            ? "cb-text-black bg-white"
            : "cb-text-white cb-bg-slate-900"
        }`}
      >
        <div>Carregando...</div>
      </div>
    );
  }

  return (
    <QueryParamProvider adapter={WindowHistoryAdapter}>
      <ComponentBookReact {...props} />
    </QueryParamProvider>
  );
};