import _ from "underscore";
import {BLOCK_SEQUENCE, CATEGORIES} from "../../../configuration/constants";

class FavoriteManager {
  constructor(editor, opts = {}) {
    _.bindAll(this, [
      "postRender",
      "renderFavoriteButtons",
      "bindFavoriteBlockHandlers",
      "fillFavoriteIcons"
    ]);

    this.editor = editor;
    this.blockManager = editor.BlockManager;
    this.favoriteBlockTypes = [];
    const cfg = editor.getConfig();

    const blockContainerId = _.get(cfg, ['blockManager', 'appendTo'], '');
    this.$blockContainer = $(blockContainerId);

    editor.on('load', () => {
      this.fillFavoriteIcons();
    });

    editor.on("storage:start:store", (data) => {
      Object.assign(data, {favoriteBlockTypes: JSON.stringify(this.favoriteBlockTypes)});
    });

    editor.on("storage:end:load", (data) => {
      if (data.favoriteBlockTypes) {
        this.favoriteBlockTypes = JSON.parse(data.favoriteBlockTypes);
      }
    });
  }

  bindFavoriteBlockHandlers() {
    // 切换"全部组件"和"我的收藏"
    const $favButtons = $(".favorite-filter-buttons");
    $favButtons.on('click', '.favorite-button', (ev) => {
      const $target = ev.currentTarget;
      const $buttons = $favButtons.children('.favorite-button');
      const type = $target.dataset.type;

      $buttons.removeClass('active');
      $target.classList.add('active');

      this.refreshBlocks(type);

      this.editor.store();
    });

    // handle toggle favorites
    this.$blockContainer.on('click', '.favorite-icon', (ev) => {
      const icon = ev.target;
      const isFavored = icon.classList.contains('active');
      const blockType = icon.dataset.blockType;

      if (isFavored) {
        this.favoriteBlockTypes.splice(this.favoriteBlockTypes.indexOf(blockType), 1);
        icon.classList.remove('active');
        icon.classList.remove('icon-shoucang');
        icon.classList.add('icon-shoucang-bai');
      } else {
        this.favoriteBlockTypes.push(icon.dataset.blockType);
        icon.classList.remove('icon-shoucang-bai');
        icon.classList.add('active');
        icon.classList.add('icon-shoucang');
      }
    });
  }

  fillFavoriteIcons() {
    this.$blockContainer[0].querySelectorAll('.favorite-icon').forEach((icon) => {
      const blockType = icon.dataset.blockType;

      if (this.favoriteBlockTypes.indexOf(blockType) > -1) {
        icon.classList.remove('icon-shoucang-bai');
        icon.classList.add('icon-shoucang');
        icon.classList.add('active');
      }
    });
  }

  postRender() {
    this.renderFavoriteButtons();

    this.fillFavoriteIcons();

    this.bindFavoriteBlockHandlers();
  }

  refreshBlocks(type) {
    if (type === "favorites") {
      const blocks = this.blockManager.getAll().filter(block => {
        return this.favoriteBlockTypes.indexOf(block.id) > -1;
      });

      this.blockManager.render(blocks);
      this.fillFavoriteIcons();
      return;
    }

    this.blockManager.render(this.editor.BlockManager.allVisibleBlocks);
    this.fillFavoriteIcons();
  }

  renderFavoriteButtons() {
    const $favButtons = $('<div class="favorite-filter-buttons"><button class="favorite-button active" data-type="all">全部组件</button><button class="favorite-button" data-type="favorites">我的收藏</button></div>');

    this.$blockContainer.before($favButtons);
  }
}

export default function (editor, opts = {}) {
  const em = editor.getModel();

  const module = new FavoriteManager(editor, opts);

  em.get("modules").push(module);
}
