import React, { useContext, 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";

const fincaList: string[] | number[] = ["a", "b", "c", "d"];
const campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];

const Cockpit: FC = () => {
  const dashboardState = useContext(StateContext);
  const dashboardDispatch = useContext(DispatchContext);

  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={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>) =>
            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;