import React from "react";
import { Menu, ListItem } from "@sc/components/ui";
import styled from "styled-components";
import moment from "moment";

import { client } from "@sc/api/gql/client";
import { getStats } from "./gql";

const CellStyle = styled.div`
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  &:hover {
    border-color: 1px solid #666;
    color: black;
  }
`;

export default ({ getCampaignState, setCampaignState }) => {
  const handleDateRangeChange = (str) => {
    let startDate;
    let endDate;

    if (str === "today") {
      startDate = moment()
        .startOf("day")
        .format();
      endDate = moment()
        .endOf("day")
        .format();
    }
    if (str === "yesterday") {
      startDate = moment()
        .subtract(1, "days")
        .startOf("day")
        .format();
      endDate = moment()
        .subtract(1, "days")
        .endOf("day")
        .format();
    }
    if (str === "lastweek") {
      startDate = moment()
        .subtract(7, "days")
        .startOf("week")
        .format();
      endDate = moment()
        .subtract(7, "days")
        .endOf("week")
        .format();
    }
    if (str === "lastmonth") {
      startDate = moment()
        .subtract(30, "days")
        .startOf("month")
        .format();
      endDate = moment()
        .subtract(30, "days")
        .endOf("month")
        .format();
    }
    if (str === "last7") {
      startDate = moment()
        .subtract(7, "days")
        .format();
      endDate = moment().format();
    }
    if (str === "last30") {
      startDate = moment()
        .subtract(30, "days")
        .format();
      endDate = moment().format();
    }
    if (str === "all") {
      startDate = moment("2020").format();
      endDate = moment().format();
    }

    setCampaignState({ startDate, endDate, dRange: str });
  };

  const Item = ({ children, onClick }) => (
    <ListItem onClick={onClick}>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div style={{ padding: "5px 10px" }}>{children}</div>
      </div>
    </ListItem>
  );
  const dRange = getCampaignState("dRange");

  const dRKeys = {
    today: "Today",
    yesterday: "Yesterday",
    lastweek: "Last Week",
    lastmonth: "Last Month",
    last7: "Last 7 Days",
    last30: "Last 30 Days",
    all: "All Time",
  };

  React.useEffect(() => {
    if (!dRange) handleDateRangeChange("today");
  });

  if (!dRange) return null;

  return (
    <CellStyle>
      <Menu label={`Showing Stats for ${dRKeys[dRange]}`}>
        <Item key="today" onClick={() => handleDateRangeChange("today")}>
          {dRKeys["today"]}
        </Item>
        <Item
          key="yesterday"
          onClick={() => handleDateRangeChange("yesterday")}
        >
          {dRKeys["yesterday"]}
        </Item>
        <Item key="lastweek" onClick={() => handleDateRangeChange("lastweek")}>
          {dRKeys["lastweek"]}
        </Item>
        <Item
          key="lastmonth"
          onClick={() => handleDateRangeChange("lastmonth")}
        >
          {dRKeys["lastmonth"]}
        </Item>
        <Item key="last7" onClick={() => handleDateRangeChange("last7")}>
          {dRKeys["last7"]}
        </Item>
        <Item key="last30" onClick={() => handleDateRangeChange("last30")}>
          {dRKeys["last30"]}
        </Item>
        <Item key="all" onClick={() => handleDateRangeChange("all")}>
          {dRKeys["all"]}
        </Item>
      </Menu>
    </CellStyle>
  );
};