import React, { MouseEventHandler } from 'react';

import Button from '@leafygreen-ui/button';
import { css, cx } from '@leafygreen-ui/emotion';
import { useForwardedRef } from '@leafygreen-ui/hooks';
// @ts-expect-error
import BuildingIcon from '@leafygreen-ui/icon/dist/Building';
// @ts-expect-error
import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';

import { mq } from '../../breakpoints';
import { useMongoNavContext } from '../../MongoNavContext';
import { useOnElementClick } from '../../on-element-click-provider';
import { linkDisabledStyle } from '../../styles';
import { CurrentOrganizationInterface, NavElement } from '../../types';
import {
  activeTriggerStyle,
  activeTriggerThemeStyle,
  baseTriggerStyle,
  buttonTextStyle,
  disabledTriggerBaseStyle,
  disabledTriggerThemeStyle,
  themeTriggerStyle,
} from '../styles';

const orgButtonStyle = css`
  border-radius: 5px 0 0 5px;
  height: 100%;

  ${mq({
    width: ['152px', '90px', '90px'],
  })}

  > *:last-child {
    // We remove the "Building" icon on tablet or smaller
    ${mq({
      gridTemplateColumns: ['16px 1fr 16px', '1fr 16px', '1fr 16px'],
    })}
  }
`;

const orgStandaloneButtonStyle = css`
  border-radius: 5px;
`;

export const orgSelectSegmentStyle = css`
  z-index: 0;
  &:hover,
  &:focus {
    z-index: 1;
  }
`;

interface OrgSelectTriggerProps {
  onClick: MouseEventHandler<Element>;
  open: boolean;
  isTablet: boolean;
  disabled: boolean;
  current?: CurrentOrganizationInterface;
  [key: string]: any;
}

export const OrgSelectTrigger = React.forwardRef<
  HTMLButtonElement,
  OrgSelectTriggerProps
>(
  (
    {
      onClick,
      open,
      isTablet,
      disabled: disabledProp,
      current,
    }: OrgSelectTriggerProps,
    forwardedRef,
  ) => {
    const { theme } = useDarkMode();
    const { isLoading } = useMongoNavContext();
    const onElementClick = useOnElementClick();
    const buttonRef = useForwardedRef(forwardedRef, null);

    const isDisabled = disabledProp || isLoading;

    const triggerText = isDisabled
      ? 'All Organizations'
      : current?.orgName ?? 'Select Organization';

    return (
      <Button
        ref={buttonRef}
        data-testid="org-trigger"
        aria-expanded={open}
        aria-disabled={isDisabled}
        disabled={isDisabled}
        onClick={onElementClick(NavElement.OrgNavOrgSelectTrigger, onClick)}
        className={cx(
          baseTriggerStyle,
          themeTriggerStyle[theme],
          orgButtonStyle,
          orgSelectSegmentStyle,
          {
            [cx(activeTriggerStyle, activeTriggerThemeStyle[theme])]: open,
            [cx(disabledTriggerBaseStyle, disabledTriggerThemeStyle[theme])]:
              isDisabled,
            [orgStandaloneButtonStyle]: isDisabled,
          },
        )}
        leftGlyph={
          isTablet ? undefined : (
            <BuildingIcon size="small" role="presentation" />
          )
        }
        rightGlyph={<CaretDownIcon role="presentation" size="small" />}
      >
        <span
          data-testid="org-select-active-org"
          className={cx(buttonTextStyle, {
            [linkDisabledStyle]: isDisabled,
          })}
        >
          {triggerText}
        </span>
      </Button>
    );
  },
);

OrgSelectTrigger.displayName = 'OrgSelectTrigger';