import * as React from "react";
import { useMenuState } from "reakit";
import { MenuButton } from "reakit/Menu";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { MenuItem } from "@shared/editor/types";
import { s } from "@shared/styles";
import ContextMenu from "~/components/ContextMenu";
import Template from "~/components/ContextMenu/Template";
import { MenuItem as TMenuItem } from "~/types";
import { useEditor } from "./EditorContext";
import ToolbarButton from "./ToolbarButton";
import ToolbarSeparator from "./ToolbarSeparator";
import Tooltip from "./Tooltip";

type Props = {
  items: MenuItem[];
};

/*
 * Renders a dropdown menu in the floating toolbar.
 */
function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
  const menu = useMenuState();
  const { commands, view } = useEditor();
  const { item } = props;
  const { state } = view;

  const items: TMenuItem[] = React.useMemo(() => {
    const handleClick = (menuItem: MenuItem) => () => {
      if (!menuItem.name) {
        return;
      }

      commands[menuItem.name](
        typeof menuItem.attrs === "function"
          ? menuItem.attrs(state)
          : menuItem.attrs
      );
    };

    return item.children
      ? item.children.map((child) => ({
          type: "button",
          title: child.label,
          icon: child.icon,
          dangerous: child.dangerous,
          visible: child.visible,
          selected:
            child.active !== undefined ? child.active(state) : undefined,
          onClick: handleClick(child),
        }))
      : [];
  }, [item.children, commands, state]);

  return (
    <>
      <MenuButton {...menu}>
        {(buttonProps) => (
          <ToolbarButton {...buttonProps} hovering={menu.visible}>
            {item.label && <Label>{item.label}</Label>}
            {item.icon}
          </ToolbarButton>
        )}
      </MenuButton>
      <ContextMenu aria-label={item.label} {...menu}>
        <Template {...menu} items={items} />
      </ContextMenu>
    </>
  );
}

function ToolbarMenu(props: Props) {
  const { commands, view } = useEditor();
  const { items } = props;
  const { state } = view;

  const handleClick = (item: MenuItem) => () => {
    if (!item.name) {
      return;
    }

    commands[item.name](
      typeof item.attrs === "function" ? item.attrs(state) : item.attrs
    );
  };

  return (
    <FlexibleWrapper>
      {items.map((item, index) => {
        if (item.name === "separator" && item.visible !== false) {
          return <ToolbarSeparator key={index} />;
        }
        if (item.visible === false || !item.icon) {
          return null;
        }
        const isActive = item.active ? item.active(state) : false;

        return (
          <Tooltip
            content={item.label === item.tooltip ? undefined : item.tooltip}
            key={index}
          >
            {item.children ? (
              <ToolbarDropdown active={isActive && !item.label} item={item} />
            ) : (
              <ToolbarButton
                onClick={handleClick(item)}
                active={isActive && !item.label}
              >
                {item.label && <Label>{item.label}</Label>}
                {item.icon}
              </ToolbarButton>
            )}
          </Tooltip>
        );
      })}
    </FlexibleWrapper>
  );
}

const FlexibleWrapper = styled.div`
  color: ${s("textSecondary")};
  overflow: hidden;
  display: flex;
  gap: 6px;

  ${breakpoint("mobile", "tablet")`
    justify-content: space-evenly;
    align-items: baseline;
  `}
`;

const Label = styled.span`
  font-size: 15px;
  font-weight: 500;
  color: ${s("text")};
`;

export default ToolbarMenu;