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

/**
 * Menu Styles
 */
export const menuContainerStyle = css`
  position: relative;

  & > ul {
    // Allows the focus states to be visible
    overflow: unset;
  }
`;

export const searchInputStyle = css`
  margin: 0 24px 12px;
`;

export const menuItemContainerStyle = css`
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
`;

export const activeTriggerStyle = css`
  transition: background-color ${transitionDuration.default}ms ease-in-out;
`;

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

export const baseTriggerStyle = css`
  align-items: center;
  padding: unset;

  // Override button columns
  > *:last-child {
    grid-template-columns: 16px 1fr 16px;
    padding: 0 8px;
  }

  &:focus {
    outline: none;
  }

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

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

    svg:first-child {
      color: ${palette.gray.base};
    }

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

    svg:first-child {
      color: ${palette.gray.light1};
    }

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

    &:hover {
      border-color: ${palette.gray.dark1};
    }
  `,
};

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,
      svg:first-child {
        color: ${palette.gray.light1};
      }
    }
  `,
  [Theme.Dark]: css`
    &,
    &:hover {
      color: ${palette.gray.base};
      background-color: ${palette.black};
      border-color: ${palette.gray.dark2};

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

export const buttonTextStyle = css`
  font-weight: bolder;
  flex-grow: 1;
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const caretBaseStyle = css`
  flex-shrink: 0;
`;

export const settingsButtonIconThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    svg {
      color: ${palette.gray.base};
    }
  `,
  [Theme.Dark]: css`
    svg {
      color: ${palette.gray.light1};
    }
  `,
};

export const settingsButtonIconActiveThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    svg {
      color: ${palette.green.dark2};
    }
  `,
  [Theme.Dark]: css`
    svg {
      color: ${palette.green.base};
    }
  `,
};

export const settingsButtonIconDisabledStyle = css`
  &,
  &:hover {
    color: ${palette.gray.base};
    background-color: ${palette.white};
    border-color: ${palette.gray.light2};
  }

  svg {
    color: ${palette.gray.light1};
  }
`;