import { ActionListItem, Tooltip, useMediaQuery } from "@prismicio/editor-ui";
import Link from "next/link";
import {
  type FC,
  type MouseEventHandler,
  type ReactNode,
  type SVGProps,
  useCallback,
} from "react";

type NavigationItemPropsBase = {
  title: string;
  active?: boolean;
  Icon: FC<SVGProps<SVGSVGElement>>;
  RightElement?: ReactNode;
  tooltip?: string;
};

type NavigationLinkItemProps = NavigationItemPropsBase & {
  href: string;
  target?: "_blank";

  // For telemetry (optional)
  onClick?: MouseEventHandler<Element>;
};

type NavigationButtonItemProps = NavigationItemPropsBase & {
  href?: never;
  target?: never;
  onClick: MouseEventHandler<Element>;
};

type NavigationItemProps = NavigationLinkItemProps | NavigationButtonItemProps;

export function NavigationItem(props: NavigationItemProps) {
  const { title, href, target, active, Icon, RightElement, onClick, tooltip } =
    props;

  const isCollapsed = useMediaQuery({ max: "medium" });

  const ItemIcon = useCallback(() => {
    return <Icon width={isCollapsed ? 28 : 32} />;
  }, [Icon, isCollapsed]);

  const Content = (
    <ActionListItem
      textVariant="normal"
      backgroundColor="transparent"
      renderStartIcon={ItemIcon}
      endAdornment={isCollapsed ? undefined : RightElement}
      selected={active}
    >
      {isCollapsed ? null : title}
    </ActionListItem>
  );

  return (
    <Tooltip
      content={Boolean(tooltip) ? tooltip ?? "" : title}
      side="right"
      visible={Boolean(tooltip) ? undefined : isCollapsed}
    >
      {href !== undefined ? (
        <Link
          href={href}
          target={target}
          style={{ textDecoration: "none" }}
          data-active={active}
          onClick={onClick}
        >
          {Content}
        </Link>
      ) : (
        <button
          style={{
            backgroundColor: "transparent",
            border: "none",
            padding: 0,
            textAlign: "left",
          }}
          onClick={onClick}
          data-active={active}
        >
          {Content}
        </button>
      )}
    </Tooltip>
  );
}