import { format, isBefore, startOfDay } from "date-fns";
import React, { useContext, useEffect, useState } from "react";
import { usePopper } from "react-popper";
import { buildClassName } from "../../shared/utils/class-util";
import { getTranslations } from "../../shared/utils/localization-util";
import SettingsContext from "../settings-context";
import { DateRange } from "../types";
import DateRangePicker from "./date-range-picker";
import Icon from "./icon";

interface DatesProps {
  value?: DateRange;
  duration?: number;
  onChange?: (value: DateRange) => void;
}

const Dates: React.FC<DatesProps> = ({
  value,
  duration,
  onChange
}) => {
  const {
    language,
  } = useContext(SettingsContext);
  const translations = getTranslations(language);
  const mql = typeof window !== "undefined" ? window.matchMedia("(min-width: 1200px)") : undefined;

  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
  const [panelActive, setPanelActive] = useState<boolean>(false);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: "top",
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [0, -40],
        },
      },
      {
        name: "preventOverflow",
        options: {
          padding: 40,
        },
      }
    ],
  });

  const handleInputFocus = () => {
    if (!panelActive) setPanelActive(true);
  }

  const handleSelectionChange = (fromDate?: Date, toDate?: Date) => {
    if (onChange) {
      onChange({ fromDate, toDate });
      setPanelActive(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleDocumentClick);
    return () => {
      document.removeEventListener("mousedown", handleDocumentClick);
    };
  });

  const handleDocumentClick: EventListener = (event) => {
    if (referenceElement && !referenceElement.contains(event.target as Node)) {
      if (panelActive) setPanelActive(false);
    }
  };

  return (
    <div className="booking-product__dates" ref={setReferenceElement}>
      <div className="booking-product__dates-title">
        <Icon name="ui-calendar" width={25} height={25} />
        {translations.PRODUCT.TRAVEL_PERIOD}
      </div>
      <div className="form__group form__group--datepicker form__group--icon">
        <div className="form__group-input">
          <label className="form__label">{translations.PRODUCT.DEPARTURE}</label>
          <input
            type="text"
            readOnly
            value={value?.fromDate ? format(value.fromDate, "dd/MM/yyyy") : ""}
            className="form__input"
            placeholder={translations.PRODUCT.DEPARTURE_DATE}
            onClick={handleInputFocus}
          />
        </div>

        <div className="form__group-input">
          <label className="form__label">{translations.PRODUCT.RETURN}</label>
          <input
            type="text"
            readOnly
            value={value?.toDate ? format(value.toDate, "dd/MM/yyyy") : ""}
            className="form__input"
            placeholder={translations.PRODUCT.RETURN_DATE}
            onClick={handleInputFocus}
          />
        </div>
        <div
          ref={setPopperElement}
          className={buildClassName([
            "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
            panelActive && "qsm__panel--active",
            !mql?.matches && "qsm__panel--mobile"
          ])}
          style={mql?.matches ? styles.popper : undefined}
          {...attributes.popper}
        >
          <DateRangePicker
            fromDate={value?.fromDate}
            toDate={value?.toDate}
            duration={duration}
            disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
            onSelectionChange={handleSelectionChange}
          />
          {!mql?.matches && (
            <div className="qsm__close" onClick={() => setPanelActive(false)}>
              <Icon name="ui-close" height={25} width={25} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Dates;