"use strict";

import $ from "jquery";
import Events from "../_events";

const FormFieldUI = (($) => {
  // Constants
  const NAME = "jsFormFieldUI";
  const DATA_KEY = NAME;
  const $Html = $("html, body");

  class FormFieldUI {
    constructor(el) {
      const ui = this;

      ui.$el = $(el);
      ui.shown = true;

      ui.$el.data(DATA_KEY, ui);
      //ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');

      ui.vals = {
        val: ui.$el.val(),
        checked: ui.$el.is(":checked"),
      };

      // bootstrap collapse integration
      ui.$el.parents(".optionset").not(".field").removeClass("collapse");
      ui.$collapse = ui.$el
        .parents(".field.collapse")
        .not(".composite")
        .first();
      if (ui.$collapse.length) {
        ui.$el.removeClass("collapse");

        ui.$collapse.on("show.bs.collapse", (e) => {
          ui.show();
        });

        ui.$collapse.on("hidden.bs.collapse", (e) => {
          ui.hide();
        });
      }

      ui.$el.addClass(`${NAME}-active`);

      return ui;
    }

    // Public methods
    dispose() {
      const ui = this;
      const $el = ui.$el;

      $el.removeClass(`${NAME}-active`);
      $.removeData($el[0], DATA_KEY);
    }

    show() {
      const ui = this;
      const $el = ui.$el;

      ui.restore();
      ui.shown = true;

      /*if (ui.$collapse.length) {
        ui.$collapse.collapse('show');
      }

      if ($el.hasClass('collapse')) {
        $el.collapse('show');
      }*/

      $el.trigger(`shown.${NAME}`);
    }

    hide() {
      const ui = this;
      const $el = ui.$el;

      ui.wipe();
      ui.shown = false;

      /*if (ui.$collapse.length) {
        ui.$collapse.collapse('hide');
      }

      if ($el.hasClass('collapse')) {
        $el.collapse('hide');
      }

      $el.trigger('change');*/
      $el.trigger(`hidden.${NAME}`);
    }

    wipe() {
      const ui = this;
      const $el = ui.$el;

      ui.vals = {
        name: $el.attr("name"),
        val: $el.val(),
        checked: $el.is(":checked"),
      };

      $el.val("");
      $el.prop("checked", false);
    }

    restore() {
      const ui = this;
      const $el = ui.$el;
      const checked = ui.vals["checked"];

      $el.val(ui.vals["val"]);
      $el.prop("checked", checked);
    }

    addMessage(msg, type = null, scrollTo = true) {
      const ui = this;
      const $field = ui.$el.closest(".field");

      $field.addClass("has-message");
      if (msg) {
        $field.append(`<div class="message alert ${type}">${msg}</div>`);
      }

      if (scrollTo) {
        const pos = $field.offset().top;
        $field.focus();
        $Html.scrollTop(pos - 100);
      }
    }

    removeMessages() {
      const ui = this;
      const $field = ui.$el.closest(".field");

      $field.removeClass("has-message");
      $field.find(".message").remove();
    }

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

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

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

  return FormFieldUI;
})($);

export default FormFieldUI;