import { css } from '@leafygreen-ui/emotion';
import { Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';

import { mq } from '../../breakpoints';

export const menuTriggerBaseStyle = css`
  appearance: none;

  ${mq({
    height: ['30px', '36px', '36px'],
    borderRadius: ['15px', '18px', '18px'],
  })}

  &:focus {
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0;
  }
`;

export const menuTriggerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.white};
    color: ${palette.black};
    border: 1px solid ${palette.gray.light2};

    &:hover,
    &:active {
      font-weight: bolder;
      border-color: ${palette.gray.light2};
      background-color: ${palette.white};
    }

    &:focus-visible {
      background-color: ${palette.white};
    }
  `,
  [Theme.Dark]: css`
    background-color: ${palette.black};
    color: ${palette.gray.light2};
    border: 1px solid ${palette.gray.dark2};

    &:hover,
    &:active {
      font-weight: bolder;
      border-color: ${palette.gray.dark1};
      background-color: ${palette.black};
    }

    &:focus-visible {
      background-color: ${palette.black};
    }
  `,
};

export const openTriggerBaseStyle = css`
  > div:last-of-type span {
    font-weight: bold;
  }
`;

export const openTriggerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.gray.light2};
    border-color: ${palette.gray.light1};
  `,
  [Theme.Dark]: css`
    background-color: ${palette.gray.dark3};
    border-color: ${palette.gray.dark2};
  `,
};

export const disabledTriggerBaseStyle = css`
  &,
  &:hover,
  &[disabled],
  &:disabled {
    pointer-events: unset;
    font-weight: unset;
    cursor: not-allowed;
    box-shadow: unset;
  }
`;

export const disabledTriggerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    &,
    &:hover {
      color: ${palette.gray.base};
      background-color: ${palette.white};
      border-color: ${palette.gray.light2};

      svg {
        color: ${palette.gray.light1};
      }
    }
  `,
  [Theme.Dark]: css`
    &,
    &:hover {
      color: ${palette.gray.base};
      background-color: ${palette.black};
      border-color: ${palette.gray.dark2};

      svg {
        color: ${palette.gray.dark1};
      }
    }
  `,
};

export const menuNameStyle = css`
  width: fit-content;
  max-width: 162px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 400;
`;