import React from 'react';
import { useRef, useState } from 'react';

import { css, cx } from '@leafygreen-ui/emotion';
// @ts-expect-error
import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
// @ts-expect-error
import OpenNewTabIcon from '@leafygreen-ui/icon/dist/OpenNewTab';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import { Menu, MenuItem } from '@leafygreen-ui/menu';
import { palette } from '@leafygreen-ui/palette';

import { useOnElementClick } from '../../on-element-click-provider';
import { ActiveNavElement, NavElement, URLS } from '../../types';
import {
  caretBaseStyle,
  caretClassName,
  caretOpenThemeStyle,
  caretThemeStyle,
  openOrgMenuThemeStyle,
  orgNavLinkWrapperClassName,
} from '../OrgNav.styles';

import { OrgNavLink } from './OrgNavLink';

const menuStyle = css`
  width: 200px;
`;

const menuItemContentStyle = css`
  display: flex;
  align-items: flex-start;
  gap: 2px;
`;

const tabIconStyle = css`
  height: 14px;
  width: 14px;
  color: ${palette.blue.light1};
`;

export function GetHelpDropdownMenu({
  loading,
  activeNav,
  isMobile,
  urls,
}: {
  loading: boolean;
  activeNav?: ActiveNavElement;
  isTablet?: boolean;
  isMobile?: boolean;
  urls: URLS;
}) {
  const { theme } = useDarkMode();
  const [isOpen, setIsOpen] = useState(false);
  const onElementClick = useOnElementClick();
  const getHelpRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);

  return (
    <OrgNavLink
      isButton
      data-testid="org-nav-dropdown-get-help"
      isActive={activeNav === NavElement.OrgNavSupport}
      loading={loading}
      onClick={onElementClick(NavElement.OrgNavDropdownGetHelp, () =>
        setIsOpen(open => !open),
      )}
      ref={getHelpRef}
      className={cx({
        [openOrgMenuThemeStyle[theme]]: isOpen,
      })}
    >
      <span className={orgNavLinkWrapperClassName}>
        {isMobile ? 'Help' : 'Get Help'}
        <CaretDownIcon
          className={cx(
            caretClassName,
            caretBaseStyle,
            caretThemeStyle[theme],
            {
              [caretOpenThemeStyle[theme]]: isOpen,
            },
          )}
          open={isOpen}
        />
      </span>
      <Menu
        open={isOpen}
        setOpen={setIsOpen}
        usePortal={false}
        popoverZIndex={1}
        className={menuStyle}
        refEl={getHelpRef}
      >
        <MenuItem
          data-testid="org-nav-docs-link"
          href={urls.orgNav.docs}
          target="_blank"
          rel="noopener noreferrer"
          onClick={onElementClick(NavElement.OrgNavDocs)}
          // TODO: restore: size={isTablet ? 'large' : 'default'}
        >
          <div className={menuItemContentStyle}>
            View Docs
            <OpenNewTabIcon role="presentation" className={tabIconStyle} />
          </div>
        </MenuItem>
        <MenuItem
          href={urls.orgNav.newCase}
          data-testid="org-nav-new-case-link"
          target="_blank"
          rel="noopener noreferrer"
          onClick={onElementClick(NavElement.OrgNavNewCase)}
        >
          <div className={menuItemContentStyle}>
            Create New Case
            <OpenNewTabIcon role="presentation" className={tabIconStyle} />
          </div>
        </MenuItem>
        <MenuItem
          data-testid="org-nav-support-link"
          href={urls.orgNav.support}
          target="_blank"
          rel="noopener noreferrer"
          onClick={onElementClick(NavElement.OrgNavSupport)}
        >
          <div className={menuItemContentStyle}>View Plan</div>
        </MenuItem>
      </Menu>
    </OrgNavLink>
  );
}