import React from "react";
import PropTypes from "prop-types";
import dayjs from "dayjs";
import styled from "styled-components";

import { Text } from "@bufferapp/components";

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

const Date = ({ children }) =>
  dayjs(children, "MM/DD/YYYY").format("MMMM D, YYYY");

const ExportText = styled.h2`
  font-family: Roboto;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 0em;
  text-align: left;
  margin: 24px 0;
`;

const DateRange = ({ startDate, endDate, exporting }) => {
  const content = (
    <React.Fragment>
      {startDate === endDate ? (
        <Date>{startDate}</Date>
      ) : (
        <React.Fragment>
          {dayjs(startDate).isSame(endDate, "year")
            ? dayjs(startDate).format("MMMM D")
            : dayjs(startDate).format("MMMM D, YYYY")}{" "}
          -{" "}
          {dayjs(startDate).isSame(endDate, "month")
            ? dayjs(endDate).format("D, YYYY")
            : dayjs(endDate).format("MMMM D, YYYY")}
        </React.Fragment>
      )}
    </React.Fragment>
  );
  return (
    <React.Fragment>
      {exporting && <ExportText>{content}</ExportText>}
      {!exporting && (
        <Text weight="semi-bold" color={outerSpace}>
          {content}
        </Text>
      )}
    </React.Fragment>
  );
};

DateRange.propTypes = {
  startDate: PropTypes.string.isRequired,
  endDate: PropTypes.string.isRequired,
};

export default DateRange;