import flatpickr from "flatpickr";
import { Utility } from "../../core/utility";

const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';

const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';

const DATEPICKER_CONFIG = {
  "datetime-local": {
    enableTime: true,
    altInput: true,
    altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
    dateFormat: "Y-m-dTH:i",
    time_24hr: true,
  },
  "date": {
    altFormat: "j. F Y",
    dateFormat: "Y-m-d",
    altInput: true,
  },
  "time": {
    enableTime: true,
    noCalendar: true,
    altFormat: "H:i",
    dateFormat: "H:i",
    altInput: true,
    time_24hr: true,
  },
};

@Utility({
  selector: DATEPICKER_UTIL_SELECTOR,
})
export class Datepicker {

  flatpickrInstance;

  constructor(element) {
    if (!element) {
      throw new Error('Datepicker utility needs to be passed an element!');
    }

    if (element.classList.contains(DATEPICKER_INITIALIZED_CLASS)) {
      return false;
    }

    const flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute("type")];

    if (!flatpickrConfig) {
      throw new Error('Datepicker utility called on unsupported element!');
    }

    this.flatpickrInstance = flatpickr(element, flatpickrConfig);

    // mark initialized
    element.classList.add(DATEPICKER_INITIALIZED_CLASS);
  }

  destroy() {
    this.flatpickrInstance.destroy();
  }
}