/* global Vue, gl */
/* eslint-disable no-param-reassign, no-bitwise*/

((gl) => {
  const SPREAD = '...';
  const PREV = 'Prev';
  const NEXT = 'Next';
  const FIRST = '<< First';
  const LAST = 'Last >>';

  const getParameterByName = (name) => {
    const url = window.location.href;
    name = name.replace(/[[\]]/g, '\\$&');
    const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
    const results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  };

  gl.VuePipelines = Vue.extend({
    components: {
      runningPipeline: gl.VueRunningPipeline,
      pipelineActions: gl.VuePipelineActions,
      stages: gl.VueStages,
      commit: gl.CommitComponent,
      pipelineUrl: gl.VuePipelineUrl,
      pipelineHead: gl.VuePipelineHead,
      glPagination: gl.VueGlPagination,
      statusScope: gl.VueStatusScope,
      timeAgo: gl.VueTimeAgo,
    },
    data() {
      return {
        pipelines: [],
        timeLoopInterval: '',
        intervalId: '',
        apiScope: 'all',
        pageInfo: {},
        pagenum: 1,
        count: { all: 0, running_or_pending: 0 },
        pageRequest: false,
      };
    },
    props: ['scope', 'store'],
    created() {
      const pagenum = getParameterByName('p');
      const scope = getParameterByName('scope');
      if (pagenum) this.pagenum = pagenum;
      if (scope) this.apiScope = scope;
      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
    },
    methods: {
      changepage(e) {
        const scope = getParameterByName('scope');
        if (scope) this.apiScope = scope;
        const text = e.target.innerText;
        const { totalPages, nextPage, previousPage } = this.pageInfo;
        if (text === SPREAD) return;
        if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
        if (text === LAST) this.pagenum = totalPages;
        if (text === NEXT) this.pagenum = nextPage;
        if (text === PREV) this.pagenum = previousPage;
        if (text === FIRST) this.pagenum = 1;
        window.history.pushState({}, null, `?scope=${this.apiScope}&p=${this.pagenum}`);
        clearInterval(this.timeLoopInterval);
        this.pageRequest = true;
        this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
      },
      author(pipeline) {
        if (!pipeline.commit) return ({ avatar_url: '', web_url: '', username: '' });
        if (pipeline.commit.author) return pipeline.commit.author;
        return ({
          avatar_url: pipeline.commit.author_gravatar_url,
          web_url: `mailto:${pipeline.commit.author_email}`,
          username: pipeline.commit.author_name,
        });
      },
      ref(pipeline) {
        const { ref } = pipeline;
        return ({ name: ref.name, tag: ref['tag?'], ref_url: ref.url });
      },
      commitTitle(pipeline) {
        if (pipeline.commit) return pipeline.commit.title;
        return '';
      },
      commitSha(pipeline) {
        if (pipeline.commit) return pipeline.commit.short_id;
        return '';
      },
      commitUrl(pipeline) {
        if (pipeline.commit) return pipeline.commit.commit_url;
        return '';
      },
    },
    template: `
      <div>
        <div class="pipelines realtime-loading" v-if='pipelines.length < 1'>
          <i class="fa fa-spinner fa-spin"></i>
        </div>
        <div class="table-holder" v-if='pipelines.length > 0'>
          <table class="table ci-table">
            <pipeline-head></pipeline-head>
            <tbody>
              <tr class="commit" v-for='pipeline in pipelines'>
                <status-scope :pipeline='pipeline'></status-scope>
                <pipeline-url :pipeline='pipeline'></pipeline-url>
                <td>
                  <commit
                    :author='author(pipeline)'
                    :tag="pipeline.ref['tag?']"
                    :title='commitTitle(pipeline)'
                    :commit_ref='ref(pipeline)'
                    :short_sha='commitSha(pipeline)'
                    :commit_url='commitUrl(pipeline)'
                  >
                  </commit>
                </td>
                <stages :pipeline='pipeline'></stages>
                <time-ago :pipeline='pipeline'></time-ago>
                <pipeline-actions :pipeline='pipeline'></pipeline-actions>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pipelines realtime-loading" v-if='pageRequest'>
          <i class="fa fa-spinner fa-spin"></i>
        </div>
        <gl-pagination
          v-if='pageInfo.total > pageInfo.perPage'
          :pagenum='pagenum'
          :changepage='changepage'
          :count='count.all'
          :pageInfo='pageInfo'
        >
        </gl-pagination>
      </div>
    `,
  });
})(window.gl || (window.gl = {}));