import React, { useEffect, useState } from "react";
import { Dropdown } from "../components";
import { Chart } from "../containers/Chart";
import { MetricType } from "../generated/graphql";

export const MetricDetailsPage: React.FC = () => {
  const [path, setPath] = useState<string>();
  const [timeframe, setTimeframe] = useState<string>("Last30days");

  useEffect(() => {
    const unsubscribeCurrentPage = webflow.subscribe("currentpage", (page) => {
      setPath(`/${page.getSlug()}`);
    });
    webflow.getCurrentPage().then((page) => setPath(`/${page.getSlug()}`));
    return () => {
      unsubscribeCurrentPage();
    };
  }, []);

  return (
    <div>
      <Dropdown
        selected="Last30days"
        options={[
          { label: "Last 7 days", value: "Last7days" },
          { label: "Last 30 days", value: "Last30days" },
          { label: "Last 3 Months", value: "Last3Months" },
          { label: "Last 6 Months", value: "Last6Months" },
          { label: "Last Year", value: "LastYear" },
        ]}
        onChange={(value) => {
          setTimeframe(value);
        }}
      />
      <div style={{ marginTop: 10 }}>
        <Chart input={{ path, metricType: MetricType.View, timeframe }} />
      </div>
      <div style={{ marginTop: 30 }}>
        <Chart
          input={{
            path,
            metricType: MetricType.Visitors,
            uniqueVisitor: true,
            timeframe,
          }}
        />
      </div>
    </div>
  );
};
