<template>
  <div class="article-wrapper">
    <aside :class="['doc-nav', 'aside', language]">
      <div class="github">
        <a href="https://github.com/apache/incubator-weex-site/tree/master/examples" target="_blank" class="repo-link">
          <img class="github-logo" src="https://img.alicdn.com/tfs/TB1ciMDbwvD8KJjy0FlXXagBFXa-120-120.png" alt="apache/incubator-weex-site">
        </a>
      </div>
      <ul class="tab-list">
        <li :class="['tab-item', currentTab === tab.type ? 'active-tab' : '']"
          v-for="tab in tabs" :key="tab.type"
          @click="toggleTab(tab.type)">
          <span class="tab-title">{{tab.name | i18n}}</span>
        </li>
      </ul>
    </aside>
    <example-list class="article" :language="language" :type="currentTab" :category="selectedCategory"></example-list>
  </div>
</template>

<script>
  import getExamples from '../index'
  import ExampleList from './ExampleList.vue'

  const examples = getExamples({ filterTODO: false })
  export default {
    components: { ExampleList },
    data () {
      return {
        currentTab: 'component',
        language: Vue.config.language || 'en'
      }
    },
    computed: {
      tabs () {
        if (!Array.isArray(examples)) {
          return []
        }
        return examples.map(category => {
          const item = Object.assign({}, category)
          delete item.group
          return item
        })
      },
      selectedCategory () {
        if (!Array.isArray(examples)) {
          return {}
        }
        return examples.filter(tab => tab.type === this.currentTab)[0]
      }
    },
    methods: {
      toggleTab (tabType, hash) {
        if (this.tabs.some(tab => tab.type === tabType) && tabType !== this.currentTab) {
          this.currentTab = tabType
          if (typeof location !== 'undefined') {
            location.hash = `#${tabType}` + (hash ? `/${hash}` : '')
          }
        }
      }
    }
  }
</script>