import styled, { css } from 'styled-components';

const StyledMenuItem = styled.li<{
  themeIntent: 'text' | 'danger';
  themeState: 'default' | 'disabled' | 'active' | 'focused';
}>`
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: ${({ theme }) => theme.space.menu.itemPadding};
  font-size: ${({ theme }) => theme.fontSizes.menu.item};
  font-weight: ${({ theme }) => theme.fontWeights.menu.item};
  line-height: ${({ theme }) => theme.lineHeights.menu.item};

  & > *:not(:first-child):last-child {
    margin-left: ${({ theme }) => theme.space.menu.rightElementMarginLeft};
  }

  &:hover {
    background: ${({ theme }) => theme.colors.menu.itemActiveBackground};
  }

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'text':
        return css`
          color: ${theme.colors.menu.item};
        `;
      case 'danger':
        return css`
          color: ${theme.colors.menu.itemDanger};
        `;
    }
  }};

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'default':
        return css``;
      case 'disabled':
        return css`
          color: ${theme.colors.menu.itemDisabled};
          cursor: not-allowed;
          pointer-events: none;
          &:hover {
            background: ${theme.colors.menu.background};
          }
        `;
      case 'focused':
        return css`
          background: ${theme.colors.menu.itemActiveBackground};
        `;
      case 'active':
        return css`
          background: ${theme.colors.menu.itemActiveBackground};
          font-weight: ${theme.fontWeights.menu.itemActive};
        `;
    }
  }};
`;

const LeftElement = styled.div`
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
`;

const MenuIcon = styled.span`
  display: inline-flex;
  margin: 0;
  padding: 0;
  margin-right: ${({ theme }) => theme.space.menu.iconMarginRight};
  font-size: ${({ theme }) => theme.fontSizes.menu.icon};
  line-height: ${({ theme }) => theme.lineHeights.menu.icon};
`;

const StyledMenu = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  background: ${({ theme }) => theme.colors.menu.background};
`;

export { StyledMenuItem, LeftElement, MenuIcon, StyledMenu };