import axios from '~/lib/utils/axios_utils';

const DEFAULT_LIMIT = 20;

export default class UserOverviewBlock {
  constructor(options = {}) {
    this.container = options.container;
    this.url = options.url;
    this.requestParams = {
      limit: DEFAULT_LIMIT,
      ...options.requestParams,
    };
    this.postRenderCallback = options.postRenderCallback;
    this.loadData();
  }

  loadData() {
    const loadingEl = document.querySelector(`${this.container} .loading`);

    loadingEl.classList.remove('hide');

    axios
      .get(this.url, {
        params: this.requestParams,
      })
      .then(({ data }) => this.render(data))
      .catch(() => loadingEl.classList.add('hide'));
  }

  render(data) {
    const { html, count } = data;
    const contentList = document.querySelector(`${this.container} .overview-content-list`);

    contentList.innerHTML += html;

    const loadingEl = document.querySelector(`${this.container} .loading`);

    if (count && count > 0) {
      document.querySelector(`${this.container} .js-view-all`).classList.remove('hide');
    } else {
      document
        .querySelector(`${this.container} .nothing-here-block`)
        .classList.add('text-left', 'p-0');
    }

    loadingEl.classList.add('hide');

    if (this.postRenderCallback) {
      this.postRenderCallback.call(this);
    }
  }
}