text: 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,
      );
    }
  }
  