'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;