import { useEffect, useState } from "react";
import api from "../utils/api";
import { Chart } from "react-google-charts";

const RightSide = (reset) => {
  // graph date
  const [topten, setTopten] = useState({
    from: "2000-01-01",
    to: "2100-01-01",
  });
  // date input field
  const [date, setDate] = useState({ from: "2000-01-01", to: "2100-01-01" });
  const [dateToSubmit, setDateToSubmit] = useState({
    from: "2000-01-01",
    to: "2100-01-01",
  });
  // radio button
  const [selectedOption, setSelectedOption] = useState("project");

  useEffect(() => {
    async function fetchData() {
      const resp = await api.get("/gettopten", {
        params: {
          from: dateToSubmit.from,
          to: dateToSubmit.to,
          filterBy: selectedOption,
        },
      });
      resp.data.unshift(["User", "Hours"]);
      // turn the data into form suitable to charts
      if (selectedOption === "project")
        for (let idx = 1; idx < resp.data.length; idx++) {
          resp.data[idx] = [resp.data[idx].name, resp.data[idx].total_time];
        }
      else if (selectedOption === "user")
        for (let idx = 1; idx < resp.data.length; idx++) {
          resp.data[idx] = [
            resp.data[idx].f_name + " " + resp.data[idx].l_name,
            resp.data[idx].total_time,
          ];
        }
      setTopten(resp.data);
    }
    fetchData();
  }, [dateToSubmit, selectedOption, reset]);

  // Chart options
  const options = {
    title: "Most comitted hours per user",
    chartArea: { width: "70%" },
    hAxis: {
      title: "Hours",
      minValue: 0,
    },
    vAxis: {
      title: selectedOption,
    },
  };

  if (!topten) <></>;

  return (
    <div style={{ flex: 1 }}>
      <>
        <label htmlFor="date">From: </label>
        <input
          type="date"
          id="from"
          name="from"
          value={date.from}
          onChange={(event) => setDate({ ...date, from: event.target.value })}
        />
        <label htmlFor="date">To: </label>
        <input
          type="date"
          id="to"
          name="to"
          value={date.to}
          onChange={(event) => setDate({ ...date, to: event.target.value })}
        />
        <button onClick={() => setDateToSubmit(date)}>Submit Date</button>
      </>
      <>
        <label>
          <input
            type="radio"
            value="user"
            checked={selectedOption === "user"}
            onChange={(event) => setSelectedOption(event.target.value)}
          />
          User
        </label>
        <label>
          <input
            type="radio"
            value="project"
            checked={selectedOption === "project"}
            onChange={(event) => setSelectedOption(event.target.value)}
          />
          Project
        </label>
      </>
      <Chart
        chartType="BarChart"
        width="100%"
        height="400px"
        data={topten}
        options={options}
      ></Chart>
    </div>
  );
};

export default RightSide;
