import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';

import {
  COLOR_SIDEBAR_SECONDARY_BUTTON_BG,
  COLOR_SIDEBAR_SECONDARY_BUTTON_BG_HOVER,
  COLOR_SIDEBAR_SECONDARY_BUTTON_BG_ACTIVE,
} from '../../styles/constants';

import { secondaryButtonDefault } from '../../shared/styles';

const activeStyles = (props: { theme: any }) => css`
  background-color: ${themeGet(
    'sidebarStyles.shopButton.active.background',
    COLOR_SIDEBAR_SECONDARY_BUTTON_BG_ACTIVE,
  )(props)};
`;

interface Props {
  active?: boolean;
  theme?: any;
}
const SidebarShopButton = styled('button')<Props>`
  ${secondaryButtonDefault}
  background-color: ${themeGet(
    'sidebarStyles.shopButton.background',
    COLOR_SIDEBAR_SECONDARY_BUTTON_BG,
  )};

  min-width: 0;
  padding-left: ${themeGet('space.2')};
  padding-right: ${themeGet('space.2')};
  padding-top: ${themeGet('space.1')};
  padding-bottom: ${themeGet('space.1')};
  line-height: 1.5;
  flex-grow: 1;

  ${props =>
    props.active
      ? activeStyles(props)
      : `
  &:hover,
  &:focus {
    background-color: ${themeGet(
      'sidebarStyles.shopButton.active.background',
      COLOR_SIDEBAR_SECONDARY_BUTTON_BG_HOVER,
    )(props)};
  }
  `}
  &:active {
    ${props => activeStyles(props)}
  }
`;

export default SidebarShopButton;