import React, { useState } from "react";
import { render } from "react-dom";
import Dropdown from "./components/Dropdown/Dropdown";
import InlineDropdowns from "./components/InlineDropdowns/InlineDropdowns";
import "./reset.css";
import "./App.css";

function App() {
  const [selectedMonth, setSelectedMonth] = useState("");
  const [selectedYear, setSelectedYear] = useState("");


  const handleMonthChange = event => {
    const selectedValue = event.target.value;
    setSelectedMonth(selectedValue);
  };

  const handleYearChange = event => {
    const selectedValue = event.target.value;
    setSelectedYear(selectedValue);
  };

  function optionDisabler(value) {
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth();

    if (selectedYear && selectedYear === currentDate.getFullYear().toString()) {
      if (parseInt(value) > currentMonth) {
        return true;
      }
    }

    return false;
  }

  function getValidYears() {
    const startYear = 2014;
    const currentYear = new Date().getFullYear();
    const validYears = [];

    for (var i = 0; i <= currentYear - startYear; i++) {
      validYears.push({ id: startYear + i, name: startYear + i });
    }

    return validYears.reverse();
  }

  const months = [
    { id: "01", name: "Jan" },
    { id: "02", name: "Feb" },
    { id: "03", name: "Mar" },
    { id: "04", name: "Apr" },
    { id: "05", name: "May" },
    { id: "06", name: "Jun" },
    { id: "07", name: "Jul" },
    { id: "08", name: "Aug" },
    { id: "09", name: "Sep" },
    { id: "10", name: "Oct" },
    { id: "11", name: "Nov" },
    { id: "12", name: "Dec" }
  ];

  return (
    <>
      <aside>
        <h1 className="app__title">MyApp</h1>

        <form>
          <InlineDropdowns label="Date">
            <Dropdown
              options={months}
              onChange={handleMonthChange}
              value={selectedMonth}
              optionDisabler={optionDisabler}
            />

            <Dropdown
              options={getValidYears()}
              onChange={handleYearChange}
              value={selectedYear}
            />
          </InlineDropdowns>
        </form>
      </aside>
      <section>
        <h2 className="section__title">Placeholder</h2>
      </section>
    </>
  );
}

render(<App />, document.getElementById("root"));