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

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

import DateRange from "../DateRange";

const Page = styled.article`
  position: relative;
  overflow-y: hidden;
  height: 1304px; /* this is 1630 - 163 - 163 (the page margins top and bottom) */
  box-sizing: border-box;
  background: ${white};
  margin-right: 115px;
  margin-left: 23px;
`;

const Container = styled.div`
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: left;
  align-items: top;
  text-align: left;
`;

const Title = styled.h1`
  display: block;
  color: ${outerSpace};
  font-size: 64px;
  font-weight: 700;
  line-height: 75px;
  margin: 0;
`;

const ImageContainer = styled.div`
  height: 256px;
  width: 256px;
  margin-bottom: 60px;
  display: flex;
  align-items: flex-end;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(${props => props.logoUrl ? props.logoUrl : 'https://s3.amazonaws.com/static.buffer.com/images/analyze.png'});
`;

const Cover = ({ dateRange, logoUrl, name, description, exporting }) => (
  <Page id="cover" className="report-chart">
    <Container>
      <div>
        <ImageContainer logoUrl={logoUrl}/>
        <Text>
          <Title>{name}</Title>
          <DateRange {...dateRange} exporting={exporting} />
        </Text>
      </div>
    </Container>
  </Page>
);

Cover.defaultProps = {
  dateRange: {},
  name: "",
  description: "",
  logoUrl: null,
};

Cover.propTypes = {
  dateRange: PropTypes.shape({
    startDate: PropTypes.string,
    endDate: PropTypes.string,
  }),
  name: PropTypes.string,
  description: PropTypes.string,
  logoUrl: PropTypes.string,
};

export default Cover;