import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Can, Cant, LOGO_UPLOAD } from "@bufferapp/analyze-account";
import UpgradeModal from "@bufferapp/upgrade-to-pro";

import WarningIcon from "@bufferapp/ui/Icon/Icons/Warning";
import { red } from "@bufferapp/ui/style/colors";
import Tooltip from "@bufferapp/ui/Tooltip";
import { Text as PrevText } from "@bufferapp/components";
import Text from "@bufferapp/ui/Text";

import {
  ChartStateLoading as Loading,
  ErrorBoundary,
} from "@bufferapp/analyze-shared-components";

import { offWhite, outerSpace, white } from "@bufferapp/components/style/color";

import Cover from "../Cover";
import ChartFactory from "../ChartFactory";
import DateRange from "../DateRange";
import EditTitle from "../EditTitle";
import LogoUpload from "../LogoUpload";
import EditDescription from "../EditDescription";

const Page = styled.div`
  background: ${(props) => (props.exporting ? white : offWhite)};
  padding: 0 0 2rem;
  box-sizing: border-box;
  margin: ${(props) => (props.exporting ? "163px 92px 0" : "-1.5rem")};
`;

const Header = styled.div`
  padding: 4.5rem 4rem;
  background: ${white};
  border-bottom: 1px solid #cdd7df;
`;

const Title = styled.h1`
  display: inline-block;
  color: ${outerSpace};
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0 -8px;
  padding: 8px;
  border: 1px solid transparent;
  position: relative;
  &:hover {
    background: rgba(29, 161, 242, 0.1);
    border-color: rgba(29, 161, 242, 0.35);
    border-radius: 4px;
  }
`;

const Description = styled.div`
  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 SummaryContainer = styled.div`
  margin-top: 326px;
  margin-left: 23px;
  break-before: page;
  break-after: page;

  h2:first-child {
    font-size: 48px;
  }

  h2:nth-child(2) {
    font-size: 20px;
    line-height: 33px;
    overflow: hidden;
  }
`;

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

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

const Container = styled.div`
  transition: all 0.2ms ease;
`;

const TitleContainer = styled.div`
  &:hover > div {
    opacity: 1;
  }
`;

const Centered = styled.div`
  display: flex;
  width: 100%;
  height: 400px;
  background: transparent;
  justify-content: center;
  align-items: center;
`;

const Gradient = styled.div`
  margin: 0 0 -2rem;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  height: 2rem;
`;

const UpsellWrapper = styled.a``;

const Wrapper = styled.div`
  display: flex;
`;

const ContentContainer = styled.div`
  width: 100%;
`;

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

function hasCampaignCharts(charts) {
  return !!charts.filter((chart) => "campaign" in chart).length;
}

const CampaignDateRangeWarning = styled.span`
  display: inline-block;
  svg {
    width: 12px;
    height: 12px;
    margin-right: 8px;
  }
`;

class Report extends React.Component {
  state = {
    showModal: false,
  };

  componentDidUpdate() {
    if (this.shouldAddPageBreaks()) {
      this.props.parsePageBreaks();
    }
  }

  componentDidMount() {
    this.props.fetch(this.props.exporting);
  }

  shouldAddPageBreaks() {
    const hasStoppedLoading = !this.props.loading;
    const isExportView = this.props.exporting;

    return hasStoppedLoading && isExportView;
  }

  showModal(ev) {
    ev.preventDefault();
    this.setState({
      showModal: true,
    });
  }

  hideModal() {
    this.setState({
      showModal: false,
    });
  }

  render() {
    const {
      name,
      dateRange,
      charts,
      loading,
      hasError,
      edit,
      saveChanges,
      editName,
      moveUp,
      moveDown,
      deleteChart,
      exporting,
      uploadLogo,
      logoUrl,
      deleteLogo,
      isLogoUploading,
      isLogoDropzoneDisabled,
      isLogoUploadErrored,
      editDescription,
      isDescriptionEditing,
      description,
      saveDescription,
      editChartNotes,
      isChartNoteEditing,
      saveChartNote,
    } = this.props;

    if (loading) {
      return (
        <Centered>
          <Loading active noBorder transparent />
        </Centered>
      );
    }
    return (
      <ErrorBoundary
        message="Oh no! There was an error rendering this report"
        hasError={hasError}
      >
        <Page id="report-page" exporting={exporting}>
          {exporting && (
            <React.Fragment>
              <Cover
                name={name}
                description={description}
                dateRange={dateRange}
                logoUrl={logoUrl}
                exporting={exporting}
              />
              {description && (
                <SummaryContainer>
                  <Text type="h2">Summary</Text>
                  <Description>{description}</Description>
                </SummaryContainer>
              )}
            </React.Fragment>
          )}
          {!exporting && (
            <Header>
              <PrevText>
                <Wrapper>
                  <ContentContainer>
                    {edit && (
                      <React.Fragment>
                        <Text htmlFor="editTitle" type="label">
                          Report Title
                        </Text>
                        <EditTitle
                          name={name}
                          saveChanges={saveChanges}
                          id="editTitle"
                        />
                      </React.Fragment>
                    )}
                    {!edit && (
                      <Container>
                        <TitleContainer>
                          <ButtonStyled onClick={editName}>
                            <Title>{name}</Title>
                          </ButtonStyled>
                        </TitleContainer>
                      </Container>
                    )}
                    {hasCampaignCharts(charts) && !exporting && (
                      <CampaignDateRangeWarning>
                        <Tooltip
                          opacity={0.9}
                          label="The campaign modules included in this report will show their data in full and won't be affected by the report date period"
                        >
                          <WarningIcon color={red} />
                        </Tooltip>
                      </CampaignDateRangeWarning>
                    )}
                    <DateRange {...dateRange} />
                    {isDescriptionEditing && (
                      <EditDescription
                        description={description}
                        saveDescription={saveDescription}
                      />
                    )}
                    {!isDescriptionEditing && (
                      <DescriptionContainer>
                        <ButtonStyled onClick={editDescription}>
                          {description && (
                            <Description>{description}</Description>
                          )}
                          {!description && (
                            <EmptyDescription>
                              Add report summary
                            </EmptyDescription>
                          )}
                        </ButtonStyled>
                      </DescriptionContainer>
                    )}
                  </ContentContainer>

                  <Can {...{ LOGO_UPLOAD }}>
                    <LogoUpload
                      logoUrl={logoUrl}
                      uploadLogo={uploadLogo}
                      deleteLogo={deleteLogo}
                      isLogoUploading={isLogoUploading}
                      isLogoDropzoneDisabled={isLogoDropzoneDisabled}
                      isLogoUploadErrored={isLogoUploadErrored}
                      exporting={exporting}
                    />
                  </Can>
                  <Cant {...{ LOGO_UPLOAD }}>
                    {this.state.showModal && (
                      <UpgradeModal
                        hide={this.hideModal.bind(this)}
                        title="Unlock Report White Labeling"
                        description="Take your reports to the next level by uploading your own
                      custom logo or the logo of your client. This gives your
                      report a more professional look without the Analyze watermark."
                      />
                    )}
                    <UpsellWrapper onClick={this.showModal.bind(this)}>
                      <LogoUpload
                        logoUrl={logoUrl}
                        uploadLogo={uploadLogo}
                        deleteLogo={deleteLogo}
                        isLogoUploading={false}
                        isLogoDropzoneDisabled
                        isLogoUploadErrored={false}
                        exporting={exporting}
                      />
                    </UpsellWrapper>
                  </Cant>
                </Wrapper>
              </PrevText>
            </Header>
          )}
          <ChartFactory
            charts={charts}
            moveUp={moveUp}
            moveDown={moveDown}
            deleteChart={deleteChart}
            exporting={exporting}
            editChartNotes={editChartNotes}
            isChartNoteEditing={isChartNoteEditing}
            saveChartNote={saveChartNote}
          />
          {exporting && <Gradient />}
        </Page>
      </ErrorBoundary>
    );
  }
}

Report.defaultProps = {
  loading: false,
  hasError: false,
  exporting: false,
  edit: false,
  dateRange: {},
  charts: [],
  isLogoUploading: false,
  isLogoDropzoneDisabled: false,
  isLogoUploadErrored: false,
  name: "",
  isDescriptionEditing: false,
  description: "",
  isChartNoteEditing: false,
};

Report.propTypes = {
  loading: PropTypes.bool,
  hasError: PropTypes.bool,
  exporting: PropTypes.bool,
  edit: PropTypes.bool,
  dateRange: PropTypes.shape({
    startDate: PropTypes.string,
    endDate: PropTypes.string,
  }),
  name: PropTypes.string,
  saveChanges: PropTypes.func.isRequired,
  charts: PropTypes.arrayOf(
    PropTypes.shape({
      chart_id: PropTypes.string,
    }).isRequired
  ),
  logoUrl: PropTypes.string.isRequired,
  editName: PropTypes.func.isRequired,
  moveUp: PropTypes.func.isRequired,
  moveDown: PropTypes.func.isRequired,
  deleteChart: PropTypes.func.isRequired,
  parsePageBreaks: PropTypes.func.isRequired,
  uploadLogo: PropTypes.func.isRequired,
  deleteLogo: PropTypes.func.isRequired,
  isLogoUploading: PropTypes.bool,
  isLogoDropzoneDisabled: PropTypes.bool,
  isLogoUploadErrored: PropTypes.bool,
  isDescriptionEditing: PropTypes.bool,
  description: PropTypes.string,
  editDescription: PropTypes.func.isRequired,
  saveDescription: PropTypes.func.isRequired,
  editChartNotes: PropTypes.func.isRequired,
  isChartNoteEditing: PropTypes.bool,
};

export default Report;