import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import iconTypes from 'Components/utils/types/iconTypes';
import useIcon from 'Components/utils/hooks/useIcon';
import { textSize } from 'Themes/utils/fontPickers';
import { secondaryColor, grayColor } from 'Themes/utils/colorPickers';

const ICON_SIZE = 20;

const iconPosition = ({ width: size }) => css`
  top: 50%;
  margin-top: -${size / 2}px;
  left: 12px;
`;

const selectedOptionColors = css`
  background-color: ${secondaryColor[0.2]};
  color: ${secondaryColor};

  & svg {
    fill: ${secondaryColor};
  }
`;

const optionColors = ({ selected }) =>
  selected
    ? selectedOptionColors
    : css`
        background-color: transparent;
        color: ${grayColor};

        & svg {
          fill: ${grayColor};
        }
      `;

const StyledOption = styled.button`
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 4px;
  text-align: left;
  font-size: ${textSize('S')};
  font-weight: bold;
  padding-left: 40px;
  cursor: pointer;
  ${optionColors}

  :focus {
    outline: 0;
  }

  :hover {
    ${selectedOptionColors}
  }
`;

const SidebarOption = ({ icon, label, count, selected, onClick }) => {
  const Icon = useIcon(icon, ICON_SIZE, iconPosition);
  const onOptionClick = useCallback(() => onClick(label), [label, onClick]);

  return (
    <StyledOption selected={selected} onClick={onOptionClick}>
      <Icon />
      {label}
      {count && ` (${count})`}
    </StyledOption>
  );
};

SidebarOption.propTypes = {
  icon: PropTypes.oneOf(iconTypes).isRequired,
  label: PropTypes.string.isRequired,
  count: PropTypes.number,
  selected: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
};

SidebarOption.displayName = 'SidebarOption';

export default SidebarOption;
