import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { ReferralIcon } from '../../../index';

const lineColorMap = {
  facebook: '#4267B2',
  twitter: '#1DA1F2',
  instagram: '#BD3381',
};

const IconWrapper = styled.span`
  border-radius: 50%;
  background-color: ${props => lineColorMap[props.name]};
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
`;

const List = styled.ul`
  margin: 16px 0;
  padding: 0;
`;

const Item = styled.li`
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px;
`;

export const Text = styled.span`
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: ${props => (props.bigger ? '16px' : '14px')};
  line-height: ${props => (props.bigger ? '19px' : '16px')};
  color: white;
  margin-left: ${props => (props.bigger ? '' : '4px')};
`;

const TooltipWrapper = styled.div`
  margin: 16px;
`;

const Container = styled.div`
  text-align: center;
  padding: 20px 0 0px;
  color: #ffffff;

  opacity: 0.75;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
`;

export const TimelineTooltip = ({ posts, day }) => {
  const sumOfAllPosts = posts.reduce((accumulator, currentValue) => accumulator + currentValue.details.length, 0);

  return (
    <TooltipWrapper>
      <Text bigger>{sumOfAllPosts} posts</Text>
      <List>
        {posts.map((channel, index) => {
          if (channel.details.length === 0) return;
          return (
            <Item key={index}>
              <IconWrapper name={channel.network}>
                <ReferralIcon
                  item={{
                    source: channel.network,
                  }}
                  size="small"
                  circular
                />
              </IconWrapper>
              <Text>{channel.details.length}</Text>
              <Text>
                {channel.details.length === 1 ? 'post' : 'posts'}
              </Text>
            </Item>
          );
        })}
      </List>
      <Container>
        <Text normal>Click dot to see posts</Text>
      </Container>
    </TooltipWrapper>
  );
};

TimelineTooltip.propTypes = {
  tooltipAction: PropTypes.func,
};