const { __ } = wp.i18n;
const { useRef, useEffect, useState } = wp.element;

import Litepicker from "litepicker";
import "litepicker/dist/plugins/ranges";

export default ({ startDate, setStartDate, endDate, setEndDate }) => {
  const dateRef = useRef();
  const [inputSize, setInputSize] = useState(25);

  let datepicker;
  useEffect(() => {
    datepicker = new Litepicker({
      element: dateRef?.current,
      singleMode: false,
      format: "MMMM D YYYY",
      autoApply: false,
      plugins: ["ranges"],
      maxDate: new Date(),
      numberOfMonths: 2,
      buttonText: {
        apply: __("Apply", "presto-player"),
        cancel: __("Cancel", "presto-player"),
      },
      dropdowns: {
        minYear: 1990,
        maxYear: null,
        months: true,
        years: true,
      },
      setup: (picker) => {
        picker.setDateRange(startDate, endDate);
        picker.on("button:apply", (start, end) => {
          setStartDate(start.dateInstance);
          setEndDate(end.dateInstance);
          setInputSize(dateRef.current.value.length);
        });
      },
    });
  }, [dateRef]);

  return (
    <div className="component-base-control">
      <div className="components-base-control__field">
        <input
          className="components-text-control__input presto-settings__date-select"
          ref={dateRef}
          size={inputSize}
        />
      </div>
    </div>
  );
};