import React, { useContext, useState, useEffect, ChangeEvent, FC } from "react";
import Select from "../../forms/select";
import CalendarInput from "../../forms/calendarInput";
import {
  DispatchContext,
  StateContext,
} from "../../../../context/dashboard/Provider";
import * as actions from "../../../../context/dashboard/actions";
import { sectors } from "../../../../api";
import { UserStateContext } from "../../../../context/auth/AuthProvider";

const fincaList: string[] | number[] = ["a", "b", "c", "d"];
const campaignList: any[] = ["2018", "2019", "2020", "2021"].map((c) => ({
  value: c,
  title: c,
}));

const Cockpit: FC = () => {
  const dashboardState = useContext(StateContext);
  const dashboardDispatch = useContext(DispatchContext);
  const userState = useContext(UserStateContext);
  const [sectorList, setSectorList] = useState<any[]>([]);

  // Inicializacion del selector de fincas
  // useEffect(() => {
  //   const token = userState.userToken;
  //   if (!token) return;
  //   sectors(token)
  //     .then((res: Response) => res.json())
  //     .then((body: any[]) => {
  //       debugger;
  //       const options = body.map((s: any) => ({
  //         title: s.title,
  //         value: s.station_code,
  //       }));

  //       if (options.length) {
  //         dashboardDispatch(actions.setSector(options[0].value));
  //       }
  //       setSectorList(options);
  //     });
  // }, []);

  return (
    <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={sectorList}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            dashboardDispatch(actions.setSector(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>) =>
            dashboardDispatch(actions.setFromControl(e.target.value))
          }
          value={dashboardState.from}
          name="Comparación"
        />
      </div>
      <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
        <CalendarInput
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            dashboardDispatch(actions.setToControl(e.target.value))
          }
          value={dashboardState.to}
          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>) =>
            dashboardDispatch(actions.setYearControl(e.target.value))
          }
          value={dashboardState.year}
          name="Comparación"
          placeholder="Año historicos"
        />
      </div>

      {/* <div className="col-auto"> */}
      {/*   <button type="button" className="btn btn-primary"> */}
      {/*     Aplicar */}
      {/*   </button> */}
      {/* </div> */}
    </section>
  );
};
export default Cockpit;