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

const RightSide = ({ reset }: { reset: boolean }) => {
  // graph date
  const [chartData, setChartData] = useState<String[][]>();
  // 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 [filter, setFilter] = useState("project");

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

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

  if (!chartData) <></>;

  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={filter === "user"}
            onChange={(event) => setFilter(event.target.value)}
          />
          User
        </label>
        <label>
          <input
            type="radio"
            value="project"
            checked={filter === "project"}
            onChange={(event) => setFilter(event.target.value)}
          />
          Project
        </label>
      </>
      {chartData !== undefined && chartData.length < 2 ? (
        <div>No data</div>
      ) : (
        <Chart
          chartType="BarChart"
          width="100%"
          height="400px"
          data={chartData}
          options={options}
        ></Chart>
      )}
    </div>
  );
};

export default RightSide;
