import React, { useRef, useState } from "react";
import Link from "next/link";
import { Transition } from "@headlessui/react";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { Bolt, HelpOutlineOutlined, WestOutlined } from "@mui/icons-material";
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
import { DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";

const helpOptions = [
  {
    name: "Documentation",
    href: "https://docs.plane.so/",
    Icon: DocumentIcon,
  },
  {
    name: "Join our Discord",
    href: "https://discord.com/invite/A92xrEGCge",
    Icon: DiscordIcon,
  },
  {
    name: "Report a bug",
    href: "https://github.com/makeplane/plane/issues/new/choose",
    Icon: GithubIcon,
  },
  {
    name: "Chat with us",
    href: null,
    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
    Icon: ChatBubbleOvalLeftEllipsisIcon,
  },
];

export interface WorkspaceHelpSectionProps {}

export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
  // store
  const { theme: themeStore } = useMobxStore();
  // states
  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
  // refs
  const helpOptionsRef = useRef<HTMLDivElement | null>(null);

  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));

  return (
    <>
      <div
        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
          themeStore?.sidebarCollapsed ? "flex-col" : ""
        }`}
      >
        {!themeStore?.sidebarCollapsed && (
          <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
            Free Plan
          </div>
        )}
        <div
          className={`flex items-center gap-1 ${
            themeStore?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
          }`}
        >
          <button
            type="button"
            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
              themeStore?.sidebarCollapsed ? "w-full" : ""
            }`}
            onClick={() => {
              const e = new KeyboardEvent("keydown", {
                key: "h",
              });
              document.dispatchEvent(e);
            }}
          >
            <Bolt fontSize="small" />
          </button>
          <button
            type="button"
            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
              themeStore?.sidebarCollapsed ? "w-full" : ""
            }`}
            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
          >
            <HelpOutlineOutlined fontSize="small" />
          </button>
          <button
            type="button"
            className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
            onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
          >
            <WestOutlined fontSize="small" />
          </button>
          <button
            type="button"
            className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
              themeStore?.sidebarCollapsed ? "w-full" : ""
            }`}
            onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
          >
            <WestOutlined
              fontSize="small"
              className={`duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`}
            />
          </button>
        </div>

        <div className="relative">
          <Transition
            show={isNeedHelpOpen}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <div
              className={`absolute bottom-2 ${
                themeStore?.sidebarCollapsed ? "left-full" : "left-[-75px]"
              } space-y-2 rounded-sm bg-custom-background-80 p-1 shadow-md`}
              ref={helpOptionsRef}
            >
              {helpOptions.map(({ name, Icon, href, onClick }) => {
                if (href)
                  return (
                    <Link href={href} key={name}>
                      <a
                        target="_blank"
                        className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-background-90"
                      >
                        <Icon className="h-4 w-4 text-custom-text-200" />
                        <span className="text-sm">{name}</span>
                      </a>
                    </Link>
                  );
                else
                  return (
                    <button
                      key={name}
                      type="button"
                      onClick={onClick ? onClick : undefined}
                      className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-custom-background-90"
                    >
                      <Icon className="h-4 w-4 text-custom-sidebar-text-200" />
                      <span className="text-sm">{name}</span>
                    </button>
                  );
              })}
            </div>
          </Transition>
        </div>
      </div>
    </>
  );
});