<template>
  <div class="container">
    <div class="columns">
        <aside class="fixed-sidebar column is-one-quarter menu has-background-white-bis">
          <div class="level">
            <a
              href="#"
              class="button is-small"
              :class="{'is-loading': loadingValidation}"
              @click="lint">Validate</a>
            <a
              href="#"
              class="button is-small"
              :class="{'is-loading': loadingUpdate}"
              :disabled="!validated"
              @click="update">Update Database</a>
            <span class="tag is-success" v-if="passedValidation">Passed!</span>
            <span class="tag is-warning" v-if="!validated">Unvalidated</span>
            <span class="tag is-danger" v-if="hasError">Errors</span>
          </div>
          <template v-if="hasError">
            <nav class="panel">
              <!-- eslint-disable-next-line vue/require-v-for-key -->
              <div class="panel-block has-background-white" v-for="err in errors">
                <ul>
                  <li class="level">
                    <div class="tags has-addons">
                      <span class="tag is-info">{{err._file_type}}</span>
                      <span class="tag">{{err._file_name}}</span>
                    </div>
                  </li>
                  <li class="error-desc-cont">
                    <div class="tag">{{err.error.name}}</div>
                    <code class="error-desc">{{err.error.message}}</code>
                    <code class="error-desc">Start: {{err.error.location.start}}</code>
                    <code class="error-desc">End: {{err.error.location.end}}</code>
                  </li>
                </ul>
              </div>
            </nav>
          </template>
          <template v-for="(value, key) in files">
            <!-- eslint-disable-next-line vue/require-v-for-key -->
            <p class="menu-label">
              <a href="#">{{key}}</a>
            </p>
            <!-- eslint-disable-next-line vue/require-v-for-key -->
            <ul class="menu-list">
              <li v-for="file in value" :key="file.abs">
                <a :class="{'is-active': isActive(file)}"
                  @click.prevent='getFile(file)'>{{file.visual}}</a>
              </li>
            </ul>
          </template>
        </aside>
      <div class="column" v-if="!activeView.populated">
        <div
          class="empty-state
          content
          has-background-white
          has-text-centered
          is-size-4
          is-uppercase">
          Select a file
        </div>
      </div>
      <div class="column" v-if="hasMarkdown">
        <div class="content has-background-white" v-html="activeView.file"></div>
      </div>
      <div class="column is-paddingless code-container" v-else-if="hasCode">
        <div class="content has-background-white">
          <pre>{{activeView.file}}</pre>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';

export default {
  name: 'Repo',
  created() {
    this.getRepo();
  },
  computed: {
    ...mapGetters('repos', [
      'hasError',
      'passedValidation',
      'hasMarkdown',
      'hasCode',
    ]),
    ...mapState('repos', [
      'files',
      'activeView',
      'validated',
      'loadingValidation',
      'loadingUpdate',
      'errors',
    ]),
  },
  methods: {
    getRepo() {
      this.$store.dispatch('repos/getRepo');
    },
    isActive(f) {
      return f.unique === this.activeView.unique;
    },
    getFile(file) {
      this.$store.dispatch('repos/getFile', file);
    },
    lint() {
      this.$store.dispatch('repos/lint');
    },
    update() {
      this.$store.dispatch('repos/update');
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 10px;
  position: fixed;
  top: 52px;
  left: 430px;
  right: 0;
  bottom: 0;
  overflow: scroll;
  z-index: 1;
}

.code-container {
  // to overcome the important on paddingless
  padding-left: 1rem !important;
}

.error-desc-cont {
  .tag {
    margin-bottom: 0.5rem;
  }
  .error-desc {
    display: block;
  }
}

.empty-state {
  padding-top: 200px;
}

</style>
