import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Link } from "@bufferapp/components";
import SidebarListItem from "@bufferapp/ui/SidebarListItem";
import { Analyze, ChartLine, Facebook, Home, Instagram, Shopify, Twitter, LinkedIn } from "@bufferapp/ui/Icon";

const NewTag = styled.em`
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  background-color: #168eea;
  border-radius: 0.25rem;
  margin-left: 4px;
  letter-spacing: 0.1rem;
  font-size: 12px;
  font-style: normal;
  color: white;
`;

const iconMap = {
  Home: <Home />,
  Facebook: <Facebook />,
  Instagram: <Instagram />,
  Twitter: <Twitter />,
  Shopify: <Shopify />,
  Campaigns: <ChartLine />,
  Reports: <Analyze />,
  LinkedIn: <LinkedIn />
};

const Item = ({ href, route, children, onClick, selectedProfile, isNew }) => {
  const selected = href === "/" ? href === route : route.includes(href);

  return (
    <Link
      href={href}
      unstyled
      onClick={(e) => {
        e.preventDefault();
        const isCurrent = href === route;
        if (!isCurrent) {
          onClick(href, selectedProfile);
        }
      }}
    >
      {isNew && <NewTag>New</NewTag>}
      <SidebarListItem
        id={href}
        title={children}
        icon={iconMap[children]}
        onItemClick={() => {}}
        selected={selected}
      />
    </Link>
  );
};

Item.propTypes = {
  children: PropTypes.node.isRequired,
  href: PropTypes.string.isRequired,
  route: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  isNew: PropTypes.bool.isRequired,
  selectedProfile: PropTypes.shape({
    id: PropTypes.string,
  }),
};

Item.defaultProps = {
  highlightActive: false,
  selectedProfile: {},
  isNew: false,
};

export default Item;