import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import Text from "@bufferapp/ui/Text";
import Tooltip from "@bufferapp/ui/Tooltip";
import { TimelineTooltip } from "./components/TimelineTooltip/";

const Wrapper = styled.div`
  display: flex;
  align-content: center;
  position: relative;
  margin-top: 16px;
`;

const TimelineWrapper = styled.div`
  display: flex;
  width: 100%;
  position: relative;

  label {
    flex: 0 1 auto;
    margin-left: 10px;
  }
`;

const Timeline = styled.div`
  height: 0px;
  width: ${props => `${props.plotWidth}px`};
  border-bottom: 2px dashed #ccdae5;
  position: absolute;
  left: ${props => `${props.plotX}px`};
  top: 9px;
`;

const Post = styled.button`
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2.5px solid #607c93;
  padding: 0;
  background-color: white;
  position: relative;
  transition: transform 125ms ease-out, border-color 125ms linear;

  &:hover {
    cursor: pointer;
    height: 22px;
    width: 22px;
    transform: scale(1.1);
    border-color: #4e6578;
    top: -1px;
    left: -1px;
  }
`;

const List = styled.ol`
  margin: 0;
  padding: 0;
  display: flex;
  position: absolute;
  left: ${props => `${props.plotX}px`};
  width: ${props => `${props.plotWidth}px`};
`;

function getDaysWidth({ numberOfDays, plotWidth, selectedMetric }) {
  return Math.round(plotWidth / (numberOfDays - (isAreaMetric({ selectedMetric }) ? 1 : 0)));
}

function isAreaMetric({ selectedMetric }) {
  return selectedMetric === 'Total Followers';
}

const Item = styled.li`
  list-style: none;
  height: 20px;
  width: 20px;
  position: absolute;
  left: calc(${props => getDaysWidth(props) * (props.position)}px - 10px);
  margin-left: ${props => isAreaMetric(props) ? 0 : (getDaysWidth(props) / 2)}px;

  :hover {
    cursor: pointer;
  }
`;

const Highlight = styled.span`
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  ::before {
    content: "";
    display: block;
    height: 10px;
    width: 10px;
    opacity: 0;
    border-radius: 50%;
    background: #4e6578;
    transition: opacity 125ms ease-out;
  }

  ${Post}:hover & {
    ::before {
      opacity: 1;
    }
  }
`;

function dayHasPosts(posts) {
  const numberOfPosts = posts
    .map((channel) => channel.details.length)
    .reduce((accumulator, currentValue) => accumulator + currentValue);

  return numberOfPosts > 0;
}

function getChartInfo() {
  const campaignPostsMetrics = document.getElementById('js-dom-to-png-campaign-posts-metrics');
  if (campaignPostsMetrics) {
    const charts = campaignPostsMetrics.getElementsByClassName('highcharts-plot-border');
    if (charts.length) {
      const chart = charts[0].getBBox();
      return {
        plotX: chart.x,
        plotWidth: chart.width,
      };
    }
  }

  return null;
}

export default class PostsTimeline extends React.PureComponent {
   constructor(props) {
    super(props);
     this.state = { refChartExist: false };
  }

  componentDidMount() {
    this.interval = setInterval(
      () => {
        const chart = getChartInfo();
        if (chart) {
          this.setState({ refChartExist: true });
          clearInterval(this.interval);
        }
      },
      50
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    const { postInfo, tooltipAction, selectedMetric} = this.props;
    const { refChartExist } = this.state;
    const chart = getChartInfo();

    return (<React.Fragment>
      {refChartExist && <Wrapper>
        <TimelineWrapper {...chart}>
          <Text htmlFor="timeline" type="label">
            Posts
          </Text>
          <Timeline {...chart} id="timeline" />
        </TimelineWrapper>
        <List {...chart} >
          {postInfo.map((daily, index) => {
            const dayAsNumber = parseInt(daily.day, 10);
            if (dayHasPosts(daily.posts)) {
              return (
                <Item key={index} {...chart} selectedMetric={selectedMetric} position={index} numberOfDays={postInfo.length}>
                  <Tooltip
                    customLabel={
                      <TimelineTooltip posts={daily.posts} day={dayAsNumber} />
                    }
                    position="top"
                    opacity={0.9}
                  >
                    <Post onClick={() => tooltipAction(daily.day)}>
                      <Highlight />
                    </Post>
                  </Tooltip>
                </Item>
              );
            }
          })}
        </List>
      </Wrapper>}
    </React.Fragment>);
  }
};

PostsTimeline.propTypes = {
  postInfo: PropTypes.array,
  tooltipAction: PropTypes.func,
  selectedMetric: PropTypes.string,
};