import React from "react";
import styled, { css } from "styled-components";
import { 
  ErrorBoundary,
  ProfileLegend,
  ColoredIcon,
} from "@bufferapp/analyze-shared-components";
import ChartEditButtons from "../ChartEditButtons";
import MultiProfileLegends from "../MultiProfileLegends";
import { CHARTS } from "./index";
import { LockIfNotAllowed, Can, Cant } from "@bufferapp/analyze-account";
import EditChartNote from "../EditChartNote";
import Text from '@bufferapp/ui/Text';
import { CampaignDate } from '@bufferapp/campaigns';

const CampaignLabel = styled.div`
  position: relative;
  opacity: 1;
  span {
    font-size: 14px;
    font-weight: 500;
  }

  p {
    margin: 0px;
    font-size: 12px;
    position: absolute;
    color: #B8B8B8;
    right: 0px;
    min-width: 100px;
    text-align: right;
  }
`;

const Separator = styled.section`
  position: relative;
  background: #ffffff;
  border: 1px solid #cdd7df;
  border-radius: 3px;
  margin: 16px 24px;
  padding: 16px 16px 24px;
  page-break-inside: avoid;

  &:last-of-type {
    margin-bottom: 0;
  }

  aside {
    opacity: 0;
  }

  &:hover {
    aside {
      opacity: 1;
    }

    .profileLegend {
      opacity: 0;
    }

    ${CampaignLabel} {
      opacity: 0;
    }
  }
`;

const TitleWrapper = styled.div`
  color: #333b43;
  padding-right: 0.4rem;
`;

const ProfileWrapper = styled.div`
  padding-left: 0.1rem;
  padding-right: 0.1rem;
`;

const Header = styled.div`
  margin: 0;
`;

const DescriptionContainer = styled.div`
  &:hover > div {
    opacity: 1;
  }
  margin-top: 16px;
`;

const Description = styled.h2`
  display: inline-block;
  color: #505050;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4rem;
  text-align: left;
  margin: 0;
  margin-left: -8px;
  padding: 8px;
  border: 1px solid transparent;
  position: relative;
  white-space: pre-wrap;
  
  &:hover {
    background: rgba(29, 161, 242, 0.1);
    border-color: rgba(29, 161, 242, 0.35);
    border-radius: 4px;
  }
`;

const EmptyDescription = styled(Description)`
  color: #afafaf;
  display: block;
  font-weight: 400;
`;

const TitleContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const ButtonStyled = styled.button`
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  margin-bottom: 8px;
`;

export const Chart = ({
  chart,
  exporting,
  moveUp,
  moveDown,
  deleteChart,
  index,
  charts,
  permissions,
  editChartNotes,
  saveChartNote
}) => {
  const content = (
    <React.Fragment>
      <Header>
        <TitleContainer>
          <TitleWrapper>
            {React.createElement(CHARTS[chart.chart_id].title, {
              ...chart,
              forReport: true
            })}
            {!exporting && (
              <ChartEditButtons
                moveUp={moveUp}
                moveDown={moveDown}
                deleteChart={deleteChart}
                id={chart._id}
                first={index === 0}
                last={index === charts.length - 1}
              />
            )}
          </TitleWrapper>
          {chart.campaign && <CampaignLabel>
            <ColoredIcon color={chart.campaign.color} /><Text> {chart.campaign.name}</Text>
            <CampaignDate campaign={chart.campaign} />
          </CampaignLabel>}
          {!chart.campaign && <ProfileWrapper className="profileLegend">
            {chart.profile_id && !chart.profileIds && (
              <ProfileLegend profile={chart.profile} />
            )}
            {chart.profileIds && (
              <MultiProfileLegends
                profiles={chart.profiles}
                comparedProfileIds={chart.profileIds}
              />
            )}
          </ProfileWrapper>}
        </TitleContainer>
        {chart.isChartNoteEditing && (
          <EditChartNote
            chartId={chart._id}
            note={chart.note}
            saveChartNote={saveChartNote}
          />
        )}
        {!chart.isChartNoteEditing && (
          <DescriptionContainer>
            <ButtonStyled onClick={() => editChartNotes(chart._id)}>
              {chart.note && <Description>{chart.note}</Description>}
              {!chart.note && !exporting && (
                <EmptyDescription>Add chart note</EmptyDescription>
              )}
            </ButtonStyled>
          </DescriptionContainer>
        )}
      </Header>
      <ErrorBoundary>
        {React.createElement(CHARTS[chart.chart_id].chart, {
          ...chart,
          forReport: true,
          timezone: chart.profile.timezone,
          service: chart.profile.service,
          exporting
        })}
      </ErrorBoundary>
    </React.Fragment>
  );
  return (
    <React.Fragment>
      <Can {...permissions}>
        <Separator key={chart._id} data-chart className="report-chart">
          {content}
        </Separator>
      </Can>
      <Cant {...permissions}>
        {!exporting && (
          <Separator key={chart._id} data-chart>
            <LockIfNotAllowed {...permissions}>{content}</LockIfNotAllowed>
          </Separator>
        )}
      </Cant>
    </React.Fragment>
  );
};