import * as React from 'react';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Flex } from '@lightspeed/flame/Core';
import { IconSmallChevronRight } from '@lightspeed/flame/Icon/SmallChevronRight';
import { Text } from '@lightspeed/flame/Text';
import { themeGet } from '@styled-system/theme-get';
import { COLOR_SIDEBAR_ITEM, COLOR_SIDEBAR_ITEM_ACTIVE } from '../../styles/constants';
import { ellipsis } from '../../shared/styles';

const activeStyle = (props: { theme?: any }) => css`
  background-color: ${themeGet(
    'sidebarStyles.sidebarLink.active.background',
    COLOR_SIDEBAR_ITEM_ACTIVE,
  )(props)};

  .cr-icon__details-1,
  .cr-icon__details-2 {
    fill: ${COLOR_SIDEBAR_ITEM_ACTIVE};
  }
`;

interface InteractionStyling {
  theme?: any;
  active?: boolean;
  disabled?: boolean;
}
export const interactionStyling = (props: InteractionStyling) => css`
  .cr-icon__base-1,
  .cr-icon__base-2 {
    fill: ${themeGet('colors.white')(props)};
  }

  .cr-icon__details-1,
  .cr-icon__details-2 {
    fill: ${themeGet('sidebarStyles.iconDetails')(props)};
  }

  &:hover,
  &:focus,
  &:active {
    color: ${themeGet('colors.white')(props)};
  }

  ${!props.active &&
    `
    &:hover,
    &:focus {
      outline: none;
      background-color: ${themeGet(
        'sidebarStyles.sidebarLink.focus.background',
        COLOR_SIDEBAR_ITEM,
      )(props)};

      .cr-icon__details-1,
      .cr-icon__details-2 {
        fill: ${COLOR_SIDEBAR_ITEM};
      }
    }
  `}

  ${props.active && activeStyle(props)}
  ${props.disabled && 'opacity: .5;'}
  &:active {
    ${activeStyle(props)}
  }
`;

const SidebarLink = styled('a')<InteractionStyling>`
  ${interactionStyling};
  color: ${themeGet('colors.white')};
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: ${themeGet('radii.radius-1')};
  text-decoration: none;
  margin-left: ${themeGet('space.2')};
  margin-right: ${themeGet('space.2')};
  margin-top: ${themeGet('space.1')};
`;

const Title = styled(Text)`
  line-height: 24px;
  color: ${themeGet('colors.white')};
  ${ellipsis}
`;

const SubLevelIcon = styled(IconSmallChevronRight)`
  opacity: 0.5;
  margin-left: ${themeGet('space.1')};
`;

interface Props {
  icon?: React.ReactNode;
  active?: boolean;
  disabled?: boolean;
  notifications?: React.ReactNode;
  hasSublevel?: boolean;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
}
const SidebarItem: React.FC<React.HTMLProps<HTMLAnchorElement> & Props> = ({
  icon,
  children,
  active,
  disabled,
  notifications,
  hasSublevel,
  ...props
}) => (
  <SidebarLink active={active} disabled={disabled} {...props}>
    <Flex alignItems="center" minWidth={0}>
      <Flex as="figure" alignItems="center" m={0} p={2}>
        {icon}
      </Flex>
      <Title as="div">{children}</Title>
    </Flex>

    {(!!notifications || hasSublevel) && (
      <Flex alignItems="center" px={1}>
        {!!notifications && notifications}
        {hasSublevel && <SubLevelIcon name="small-chevron-right" color="white" />}
      </Flex>
    )}
  </SidebarLink>
);

export default SidebarItem;