import * as React from 'react';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { IconSmallChevronDown } from '@lightspeed/flame/Icon/SmallChevronDown';
import { Flex } from '@lightspeed/flame/Core';
import { themeGet } from '@styled-system/theme-get';

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

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

const activeStyle = css`
  background-color: ${COLOR_SIDEBAR_SECONDARY_BUTTON_BG_HOVER};
`;

interface DropdownButtonProps {
  active?: boolean;
}
const DropdownButton = styled('button')<DropdownButtonProps>`
  ${secondaryButtonDefault}
  background-color: transparent;

  padding: ${themeGet('space.2')} 0;
  margin-bottom: ${themeGet('space.1')};

  &:hover,
  &:focus {
    background-color: ${COLOR_SIDEBAR_SECONDARY_BUTTON_BG};
  }

  ${props => props.active && activeStyle}
  &:active {
    ${activeStyle}
  }
`;

const Title = styled('div')`
  padding-left: ${themeGet('space.2')};
  padding-right: ${themeGet('space.1')};
  ${ellipsis}
`;

const SidebarDropdownButton = React.forwardRef<
  HTMLButtonElement,
  DropdownButtonProps & { children: React.ReactNode }
>(({ children, ...props }, ref) => (
  <DropdownButton type="button" ref={ref} {...props}>
    <Flex alignItems="center" justifyContent="space-between">
      <Title>{children}</Title>
      <Flex alignItems="center" pr={1}>
        <IconSmallChevronDown
          name="small-chevron-down"
          color="white"
          css={css`
            opacity: 0.5;
          `}
        />
      </Flex>
    </Flex>
  </DropdownButton>
));

export default SidebarDropdownButton;