import React, { Fragment, memo, useState, useEffect, } from 'react';
import DatePickers, { registerLocale } from 'react-datepicker';
import es from "date-fns/locale/es";

//import "react-datepicker/dist/react-datepicker.css";

function monthYearPicker(props) {

  const [dateDP, setDateDP] = useState(new Date());
  registerLocale("es", es);

  const { id, col, attributes, pvalue, label, handleChange, className, ListaAnnos } = props;
  const labelInput = label == undefined ? "Fecha" : label;
  const clase = (className == undefined ? "" : className);
  //const clearIcon = (pclearIcon == undefined ? null : true);
  const stilo = { display: (attributes.hidden == undefined)? 'unset' :attributes.hidden };
  const _minDate = (attributes.minDate == undefined) ? null : attributes.minDate;
  const _maxDate = (attributes.maxDate == undefined) ? null : attributes.maxDate;
  const _ListaAnnos = attributes.ListaAnnos;
  const getYear = (pFecha) => {
    let _Year = pFecha.getFullYear();
    return _Year;

  }

  const onChangeDP = (date, name) => {
    const name5 = name;
    const dateDP = date;

    setDateDP(dateDP);
    console.log('onChangeInput', dateDP)
  }
  return (
    <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
      <div className="form-groupdp">
        <label htmlFor={id}>{label}</label>
        <div className={"date form-controldp"}  >
          <DatePickers
            renderCustomHeader={({
              date,
              changeYear,
              changeMonth,
              decreaseMonth,
              increaseMonth,
              prevMonthButtonDisabled,
              nextMonthButtonDisabled,
            }) => (
              <div
                style={{
                  margin: 10,
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
                  {"<"}
                </button>
                <select
                  value={getYear(date)}
                  onChange={({ target: { value } }) => changeYear(value, id)}
                >
                  {_ListaAnnos.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </select>


                <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
                  {">"}
                </button>
              </div>
            )}
            name={id}
            id={id}
            //value={pvalue}
            selected={pvalue}
            onChange={(date) => { handleChange(date, id) }}
            dateFormat={attributes.formatDate}
            showMonthYearPicker={true}
            disabled={attributes.readOnly}
            //clearIcon={clearIcon}
            locale="es"
            minDate={_minDate}
            maxDate={_maxDate}
          //className={clase}
          />
        </div>
      </div>
    </div>
  );
};
export default monthYearPicker