import React, { useState, useCallback, memo } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import iconTypes from 'Components/utils/types/iconTypes';
import { grayColor } from 'Themes/utils/colorPickers';
import SidebarOption from './sidebarOption';
import AgentInfo from './agentInfo';

const StyledSidebar = styled.div`
  max-width: 224px;
  height: 100%;
  padding: 16px;
  background-color: ${grayColor[0.2]};
`;

const SidebarLogo = styled.img`
  margin: 0 32px 16px 16px;
`;

const OptionList = styled.div``;

const Sidebar = ({
  logo,
  options,
  selectedOption: initSelectedOption,
  onSelect,
  agentInfo,
  ...props
}) => {
  const [selectedOption, setSelectedOption] = useState(initSelectedOption);

  const OptionWithSelected = useCallback(
    option => {
      const { label } = option;

      const onClick = useCallback(() => {
        onSelect(label);
        setSelectedOption(label);
      }, [label, onSelect]);

      return (
        <SidebarOption
          key={`sidebar-option-${label}`}
          {...option}
          selected={label === selectedOption}
          onClick={onClick}
        />
      );
    },
    [options, selectedOption, onSelect],
  );

  return (
    <StyledSidebar {...props}>
      <SidebarLogo src={logo} />
      <OptionList>{options.map(OptionWithSelected)}</OptionList>
      {agentInfo && <AgentInfo {...agentInfo} />}
    </StyledSidebar>
  );
};

Sidebar.propTypes = {
  logo: PropTypes.string.isRequired,
  options: PropTypes.arrayOf(
    PropTypes.shape({
      icon: PropTypes.oneOf(iconTypes).isRequired,
      label: PropTypes.string.isRequired,
      count: PropTypes.number,
    }).isRequired,
  ).isRequired,
  selectedOption: PropTypes.string,
  onSelect: PropTypes.func.isRequired,
  agentInfo: PropTypes.shape({
    picture: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    subtitle: PropTypes.string,
    phone: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
  }),
};

Sidebar.displayName = 'Sidebar';

export default Sidebar;
