import _ from "lodash";
import React, { useEffect, useState } from "react";

import moment from "moment";

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

import style from "./style";

const getBackground = (settings) => {
  // const type = _.get(settings, "page.type", false);
  // const screenshot = _.get(settings, "page.screenshot", false);

  // if (screenshot.indexOf("PT_misc_blank") > -1) return "#760144";
  // if (screenshot.indexOf("PT_content_article") > -1) return "#0099CB";
  // if (screenshot.indexOf("PT_misc_about") > -1) return "#760144";
  // if (screenshot.indexOf("PT_content_product") > -1) return "#0099CB";
  // if (screenshot.indexOf("PT_squeeze_email") > -1) return "#EC8522";
  // if (screenshot.indexOf("PT_misc_terms") > -1) return "#760144";
  // if (screenshot.indexOf("PT_content_video") > -1) return "#0099CB";
  // if (screenshot.indexOf("PT_sales_precart") > -1) return "#C0B937";
  // if (screenshot.indexOf("PT_sales_longform") > -1) return "#C0B937";
  // if (screenshot.indexOf("PT_sales") > -1 || type === "sales") return "#C0B937";
  // if (screenshot.indexOf("PT_sales_bonus") > -1) return "#C0B937";
  // if (screenshot.indexOf("PT_ty_simple") > -1) return "#FEBE34";
  // if (screenshot.indexOf("PT_squeeze_webinar") > -1) return "#EC8522";
  // if (screenshot.indexOf("PT_popup_optin") > -1) return "#64DDB8";
  // if (screenshot.indexOf("TS_facebook") > -1) return "#547BBC";
  // if (screenshot.indexOf("TS_adwords") > -1) return "#4B7BBE";
  // if (screenshot.indexOf("TS_email") > -1) return "#FAC666";
  // if (screenshot.indexOf("TS_blog") > -1) return "#8C589F";
  // if (screenshot.indexOf("TS_twitter") > -1) return "#78CBEF";
  // if (screenshot.indexOf("TS_youtube") > -1) return "#CE4646";
  // if (screenshot.indexOf("TS_webinar") > -1) return "#ADCE74";
  // if (screenshot.indexOf("TS_affiliate") > -1) return "#8CCEDD";
  // if (screenshot.indexOf("TS_other") > -1) return "#D87CA5";
  // if (screenshot.indexOf("TS_organic") > -1) return "#EF8952";
  // if (screenshot.indexOf("TS_organic") > -1) return "#EF8952";

  // if (screenshot.indexOf("AC_splittesting") > -1) return "#B08ABE";
  // if (screenshot.indexOf("AC_pageredirect") > -1) return "#B08ABE";
  // if (screenshot.indexOf("AC_conditionalredirect") > -1) return "#B08ABE";
  // if (screenshot.indexOf("AC_listsegment") > -1) return "#333333";
  // if (screenshot.indexOf("AC_anotherfunnel") > -1) return "#8CCEDD";

  return "#760144";
};

const StatsNode = ({ getCampaignState, setCampaignState }) => {
  const [peopleCount, setPeopleCount] = useState(false);
  const backgroundColor = getBackground();

  const startDate = getCampaignState("startDate");
  const endDate = getCampaignState("endDate");

  const initialize = async () => {
    try {
      // const { data: { stats: { people }}} = await client.query({
      //   query: getStats,
      //   variables: {
      //     id: "test_pageId_2",
      //     type: "PAGE",
      //     startDate,
      //     endDate,
      //   },
      // });
      // setPeopleCount(people);
      setPeopleCount("0");
    } catch (err) {
      setPeopleCount("?");
    }
  };

  useEffect(() => {
    console.log({ startDate, endDate });
    initialize();
  }, [startDate]);

  return (
    <div
      style={{
        ...style.parent,
        backgroundColor: peopleCount ? backgroundColor : "#D9D9D9",
      }}
    >
      {peopleCount ? (
        <div style={style.child}>{peopleCount}</div>
      ) : (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "100%",
          }}
        >
          <img
            src="https://www.ruralsourcing.com/wp-content/uploads/2016/10/3-Steps-to-Optimize-SAP.gif"
            style={{ width: 80, height: 80 }}
          />
        </div>
      )}
    </div>
  );
};

export default StatsNode;