import $ from 'jquery';
import { removeParams } from '~/lib/utils/url_utility';
import createGroupTree from '~/groups';
import {
  ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
  ACTIVE_TAB_SHARED,
  ACTIVE_TAB_ARCHIVED,
  CONTENT_LIST_CLASS,
  GROUPS_LIST_HOLDER_CLASS,
  GROUPS_FILTER_FORM_CLASS,
} from '~/groups/constants';
import UserTabs from '~/pages/users/user_tabs';
import GroupFilterableList from '~/groups/groups_filterable_list';

export default class GroupTabs extends UserTabs {
  constructor({ defaultAction = 'subgroups_and_projects', action, parentEl }) {
    super({ defaultAction, action, parentEl });
  }

  bindEvents() {
    this.$parentEl
      .off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
      .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', (event) => this.tabShown(event));
  }

  tabShown(event) {
    const $target = $(event.target);
    const action = $target.data('action') || $target.data('targetSection');
    const source = $target.attr('href') || $target.data('targetPath');

    document.querySelector(GROUPS_FILTER_FORM_CLASS).action = source;

    this.setTab(action);
    return this.setCurrentAction(source);
  }

  setTab(action) {
    const loadableActions = [
      ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
      ACTIVE_TAB_SHARED,
      ACTIVE_TAB_ARCHIVED,
    ];
    this.enableSearchBar(action);
    this.action = action;

    if (this.loaded[action]) {
      return;
    }

    if (loadableActions.includes(action)) {
      this.cleanFilterState();
      this.loadTab(action);
    }
  }

  loadTab(action) {
    const elId = `js-groups-${action}-tree`;
    const endpoint = this.getEndpoint(action);

    this.toggleLoading(true);

    createGroupTree(elId, endpoint, action);
    this.loaded[action] = true;

    this.toggleLoading(false);
  }

  getEndpoint(action) {
    const { endpointsDefault, endpointsShared } = this.$parentEl.data();
    let endpoint;

    switch (action) {
      case ACTIVE_TAB_ARCHIVED:
        endpoint = `${endpointsDefault}?archived=only`;
        break;
      case ACTIVE_TAB_SHARED:
        endpoint = endpointsShared;
        break;
      default:
        // ACTIVE_TAB_SUBGROUPS_AND_PROJECTS
        endpoint = endpointsDefault;
        break;
    }

    return endpoint;
  }

  enableSearchBar(action) {
    const containerEl = document.getElementById(action);
    const form = document.querySelector(GROUPS_FILTER_FORM_CLASS);
    const filter = form.querySelector('.js-groups-list-filter');
    const holder = containerEl.querySelector(GROUPS_LIST_HOLDER_CLASS);
    const dataEl = containerEl.querySelector(CONTENT_LIST_CLASS);
    const endpoint = this.getEndpoint(action);

    if (!dataEl) {
      return;
    }

    const { dataset } = dataEl;
    const opts = {
      form,
      filter,
      holder,
      filterEndpoint: endpoint || dataset.endpoint,
      pagePath: null,
      dropdownSel: '.js-group-filter-dropdown-wrap',
      filterInputField: 'filter',
      action,
    };

    if (!this.loaded[action]) {
      const filterableList = new GroupFilterableList(opts);
      filterableList.initSearch();
    }
  }

  cleanFilterState() {
    const values = Object.values(this.loaded);
    const loadedTabs = values.filter((e) => e === true);

    if (!loadedTabs.length) {
      return;
    }

    const newState = removeParams(['page'], window.location.search);

    window.history.replaceState(
      {
        url: newState,
      },
      document.title,
      newState,
    );
  }
}