"use strict";

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

const FormStorage = (($) => {
  // Constants
  const NAME = "jsFormStorage";
  const DATA_KEY = NAME;
  const STORAGE = window.localStorage;

  class FormStorage {
    constructor(element) {
      console.log(`${NAME}: init`);

      const ui = this;
      const $element = $(element);
      const $elements = $element.find("input, textarea, select");

      const setRangeValues = function (el) {
        const $el = $(el);
        $el.siblings(".value").text($el.val());
      };

      ui._element = element;
      $element.data(DATA_KEY, this);

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

      // restore form data from localStorage
      $elements.each((i, el) => {
        const $el = $(el);
        const id = $el.attr("id");
        const type = $el.attr("type");
        const val = STORAGE.getItem(NAME + id);

        if (type === "file") {
          return true;
        }

        if (id && val && type) {
          if (type && (type === "checkbox" || type === "radio")) {
            $el.prop("checked", val);
          } else {
            $el.val(val);
          }
        }

        $el.trigger(Events.RESTORE_FIELD);
      });

      // range fields
      $('input[type="range"]').each((i, el) => {
        setRangeValues(el);
      });

      $element.trigger(Events.RESTORE_FIELD);

      $('input[type="range"]').on("change", (e) => {
        setRangeValues(e.currentTarget);
      });

      // store form data into localStorage
      $elements.on("change", (e) => {
        const $el = $(e.currentTarget);
        const id = $el.attr("id");
        const type = $el.attr("type");

        // skip some elements
        if ($el.hasClass("no-storage")) {
          return true;
        }

        let val = $el.val();

        if (type && (type === "checkbox" || type === "radio")) {
          val = !!$el.is(":checked");
        }

        if (id && type && type !== "password") {
          STORAGE.setItem(NAME + id, val);
        }
      });

      $element.on("submit", () => {
        $element.data(DATA_KEY).clear();
      });

      $element
        .find(".btn-toolbar,.form-actions")
        .children('button,[type="submit"],[type="clear"]')
        .on("click", () => {
          $element.data(DATA_KEY).clear();
        });

      $element.addClass(`${NAME}-active`);
      $element.trigger(Events.FORM_INIT_STORAGE);
    }

    // Public methods
    dispose() {
      const $element = $(this._element);

      $element.removeClass(`${NAME}-active`);
      $.removeData(this._element, DATA_KEY);
      this._element = null;
    }

    clear() {
      STORAGE.clear();
    }

    static _jQueryInterface() {
      if (typeof window.localStorage !== "undefined") {
        return this.each(function () {
          // attach functionality to element
          const $element = $(this);
          let data = $element.data(DATA_KEY);

          if (!data) {
            data = new FormStorage(this);
            $element.data(DATA_KEY, data);
          }
        });
      }
    }
  }

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

  // auto-apply
  $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
    $("form").each((i, el) => {
      const $el = $(el);

      // skip some forms
      if ($el.hasClass("no-storage")) {
        return true;
      }

      $el.jsFormStorage();
    });
  });

  return FormStorage;
})($);

export default FormStorage;