"use strict";

import $ from "jquery";

import Events from "../_events";

import "bootstrap-datepicker/dist/js/bootstrap-datepicker.js";
import "bootstrap-timepicker/js/bootstrap-timepicker.js";

const DatetimeUI = (($) => {
  // Constants
  const W = window;
  const D = document;
  const $Body = $("body");

  const NAME = "jsDatetimeUI";
  const DATA_KEY = NAME;

  const datepickerOptions = {
    autoclose: true,
    startDate: 0,
    //todayBtn: true,
    todayHighlight: true,
    clearBtn: true,
  };

  class DatetimeUI {
    constructor(el) {
      console.log(`${NAME}: init`);

      const ui = this;
      const $el = $(el);

      ui._el = el;

      // datepicker
      if ($el.hasClass("date") || $el.attr("type") === "date") {
        const defaultDate =
          $el.attr("name").toLowerCase().indexOf("end") !== -1 ? "+4d" : "+3d";

        $el.attr("readonly", "true");
        $el.datepicker(
          $.extend(
            datepickerOptions,
            {
              defaultViewDate: defaultDate,
              multidate: $el.data("multidate"),
            },
            $el.data()
          )
        );
      }

      // timepicker
      else if ($el.hasClass("time") || $el.attr("type") === "time") {
        $el.attr("readonly", "true");
        $el
          .timepicker(
            $.extend(
              {
                snapToStep: true,
                icons: {
                  up: "fas fa-chevron-up",
                  down: "fas fa-chevron-down",
                },
              },
              $el.data()
            )
          )
          .on("show.timepicker", (e) => {
            const $el = $(e.currentTarget);
            const $dropdown = $Body.find(".bootstrap-timepicker-widget");

            if (!$dropdown.find('[data-action="clear"]').length) {
              $dropdown
                .find("tbody")
                .append(
                  '<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>'
                );
            }

            const $clearBtn = $dropdown.find('[data-action="clear"]');
            $clearBtn.on("click", (e) => {
              e.preventDefault();
              $el.timepicker("clear");
              $el.timepicker("hideWidget");
            });
          });
      }
    }

    static dispose() {
      console.log(`${NAME}: dispose`);
    }

    static _jQueryInterface() {
      return this.each(function () {
        // attach functionality to element
        const $el = $(this);
        let data = $el.data(DATA_KEY);

        if (!data) {
          data = new DatetimeUI(this);
          $el.data(DATA_KEY, data);
        }
      });
    }
  }

  // jQuery interface
  $.fn[NAME] = DatetimeUI._jQueryInterface;
  $.fn[NAME].Constructor = DatetimeUI;
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT;
    return DatetimeUI._jQueryInterface;
  };

  // auto-apply
  $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
    $(
      'input.date, input.time,input[type="date"], input[type="time"]'
    ).jsDatetimeUI();
  });

  return DatetimeUI;
})($);

export default DatetimeUI;