(function (paw, utils) {
  function PawViewSwitchComponent($holder, settings) {
    var self = this;
    this.$holder = $holder;
    this.settings = settings;

    this.lastResponsiveState = null;

    this.onViewListSelected = function () {
      self.settings.onOpenViewList();
    };

    this.onMoveNext = function () {
      self.settings.onMoveNeighbour(false);
    };

    this.onMovePrevious = function () {
      self.settings.onMoveNeighbour(true);
    };
  }

  PawViewSwitchComponent.prototype.markupDef = function () {
    var markup = [];
    markup.push(
      '<div id="view-switch" class="paw-area-h paw-view-switch paw-items-middle paw-nooverflow">'
    );
    if (this.settings.showViewListActions) {
      markup.push('   <div class="paw-col">');
      markup.push(
        '      <button id="view-switch-previous" class="view-switch-btn"><span class="fa fa-chevron-left"></span></button>'
      );
      markup.push("   </div>");
    }
    markup.push("   <div class='paw-col-d paw-area-h paw-nooverflow'>");
    markup.push("      <div class='paw-col-d view-switch-title'>");
    markup.push("         <span>" + this.settings.viewTitle + "</span>");
    markup.push("      </div>");
    if (this.settings.showViewListActions) {
      markup.push("      <div class='paw-col'>");
      markup.push(
        "         <button id='view-list-btn' class='view-switch-btn view-switch-list-btn'>"
      );
      markup.push("            <span class='fa fa-list'></span>");
      markup.push("         </button>");
      markup.push("      </div>");
    }
    markup.push("   </div>");
    if (this.settings.showViewListActions) {
      markup.push('   <div class="paw-col">');
      markup.push(
        '      <button id="view-switch-next" class="view-switch-btn"><span class="fa fa-chevron-right"></span></button>'
      );
      markup.push("   </div>");
    }
    markup.push("</div>");
    return markup;
  };

  PawViewSwitchComponent.prototype.initViewSwitch = function ($holder) {
    var self = this;
    var $viewSwitch = $(this.markupDef().join("\n"));

    $holder.html($viewSwitch);

    $holder.find("#view-list-btn").click(this.onViewListSelected);
    $holder.find("#view-switch-next").click(this.onMoveNext);
    $holder.find("#view-switch-previous").click(this.onMovePrevious);
  };

  PawViewSwitchComponent.prototype.destroyViewSwitch = function () {
    if ($("#view-switch").find("#view-list-btn").length > 0) {
      $("#view-switch").find("#view-list-btn").off("click");
    }
    $("#view-switch").remove();
  };

  PawViewSwitchComponent.prototype.init = function () {
    var self = this;
    self.responsivness();

    $(window).on("resize", function () {
      self.responsivness();
    });
  };

  PawViewSwitchComponent.prototype.responsivness = function () {
    if (window.innerWidth <= 640 && this.lastResponsiveState !== "mobile") {
      var $mholder = $("#view-switch-holder-mobile");
      this.destroyViewSwitch();
      this.initViewSwitch($mholder);
      this.lastResponsiveState = "mobile";
    } else if (
      window.innerWidth > 640 &&
      this.lastResponsiveState !== "desktop"
    ) {
      this.destroyViewSwitch();
      this.initViewSwitch(this.$holder);
      this.lastResponsiveState = "desktop";
    }
  };

  paw.com.viewSwitch.ViewSwitch = PawViewSwitchComponent;
})(paw, paw.utils);
