import React, { useContext, ChangeEvent, FC } from "react";
import Select from "../UI/forms/select";
// import DegreeDay from "../data/DegreeDay";
// import TemperaturePerSeason from "../data/TemperaturePerSeason";
import TemperaturePerSector from "../data/TemperaturePerSector";
// import Precipitation from "../data/Precipitation";
import CalendarInput from "../UI/forms/calendarInput";
import { UserStateContext } from "../../context/auth/AuthProvider";
import DashboardProvider from "../../context/dashboard/Provider";
import { Redirect } from "react-router-dom";
import Layout from "../layout";

const Home: FC = () => {
  let fincaList: string[] | number[] = ["a", "b", "c", "d"];
  let campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];

  const userState = useContext(UserStateContext);

  if (!userState.loggedIn) {
    return <Redirect to="/login" />;
  }

  return (
    <>
      <Layout>
        <DashboardProvider>
          <section className="row p-lg-4 p-md-3 p-2">
            <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
              <Select
                list={fincaList}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  console.log(e.target.value)
                }
                name="Comparación"
                placeholder="Fincas"
              />
            </div>
            <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
              <CalendarInput
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  console.log(e.target.value)
                }
                name="Comparación"
              />
            </div>
            <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
              <CalendarInput
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  console.log(e.target.value)
                }
                name="Comparación"
              />
            </div>
            <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
              <Select
                list={campaignList}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  console.log(e.target.value)
                }
                name="Comparación"
                placeholder="Año historicos"
              />
            </div>

            <div className="col-auto">
              <button type="button" className="btn btn-primary">
                Aplicar
              </button>
            </div>
          </section>

          <section className="row">
            {/*   <div className="col-xl-6"> */}
            {/*     <TemperaturePerSeason /> */}
            {/*     <DegreeDay */}
            {/*       title={"Vista flores"} */}
            {/*       periodString={"1ro Octubre - 31 Marzo"} */}
            {/*     /> */}
            {/*     <Precipitation */}
            {/*       title={"Maipú"} */}
            {/*       periodString={"1ro Octubre - 31 Marzo"} */}
            {/*     /> */}
            {/*   </div> */}
            <div className="col-xl-6">
              <TemperaturePerSector />
            </div>
          </section>
        </DashboardProvider>
      </Layout>
    </>
  );
};

export default Home;