import "../css/app.css";
import Alpine from "alpinejs";
import Datepicker from "flowbite-datepicker/Datepicker";
import de from "../../node_modules/flowbite-datepicker/js/i18n/locales/de.js";
Datepicker.locales.de = de.de;
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
dayjs.extend(customParseFormat);

function initDatepicker(el) {
  new Datepicker(el, {
    autohide: true,
    format: "dd.mm.yyyy",
    language: "de",
    update: true,
  });
  el.addEventListener("changeDate", function (event) {
    event.target.dispatchEvent(new Event("input"));
  });
}

document.querySelectorAll("[datepicker]").forEach((el) => initDatepicker(el));

window.Alpine = Alpine;
Alpine.data("form", () => ({
  birthday: null,
  date: null,
  isUnder18: function () {
    if (!this.birthday || !this.date) {
      return false;
    }

    console.log(dayjs(this.birthday, "DD.MM.YYYY").add(18, "year"));
    return dayjs(this.birthday, "DD.MM.YYYY")
      .add(18, "year")
      .isAfter(dayjs(this.date, "DD.MM.YYYY"));
  },
}));

Alpine.start();