<template>
  <el-collapse-item :title="name" :name="name" class="has-background">
    <div v-if="loadRemotePack">
      <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
        <el-form-item :label=" $t('emoji.sharePack')">
          <el-switch v-model="share" disabled />
        </el-form-item>
        <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
          <span>{{ homepage }}</span>
        </el-form-item>
        <el-form-item v-if="description" :label=" $t('emoji.description')">
          <span>{{ description }}</span>
        </el-form-item>
        <el-form-item v-if="license" :label=" $t('emoji.license')">
          <span>{{ license }}</span>
        </el-form-item>
        <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
          <span>{{ fallbackSrc }}</span>
        </el-form-item>
        <el-form-item
          v-if="fallbackSrc && fallbackSrc.trim() !== ''"
          :label=" $t('emoji.fallbackSrcSha')">
          {{ pack.pack["fallback-src-sha256"] }}
        </el-form-item>
        <el-form-item>
          <el-link
            v-if="pack.pack['can-download'] && pack.pack['fallback-src']"
            :href="pack.pack['fallback-src']"
            :underline="false"
            type="primary"
            target="_blank">
            <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
          </el-link>
        </el-form-item>
      </el-form>
      <el-collapse v-model="showPackContent" class="contents-collapse" @change="handleChange($event, name)">
        <el-collapse-item :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
          <div v-if="pack.files && Object.keys(pack.files).length > 0">
            <single-emoji-editor
              v-for="(file, shortcode) in pack.files"
              :key="shortcode"
              :host="host"
              :pack-name="name"
              :shortcode="shortcode"
              :file="file"
              :is-local="isLocal" />
          </div>
          <span v-else class="expl">{{ $t('emoji.emptyPack') }}</span>
          <div class="files-pagination">
            <el-pagination
              :total="remotePackFilesCount"
              :current-page="currentFilesPage"
              :page-size="pageSize"
              hide-on-single-page
              layout="prev, pager, next"
              @current-change="handleFilesPageChange"
            />
          </div>
        </el-collapse-item>
        <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
          <p>
            {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
            "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
            {{ $t('emoji.willBeUsable') }}.
          </p>
          <div class="download-shared-pack">
            <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
            <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
              {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-collapse-item>
</template>

<script>
import SingleEmojiEditor from './SingleEmojiEditor.vue'

export default {
  components: { SingleEmojiEditor },
  props: {
    activeTab: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    pack: {
      type: Object,
      required: true
    },
    host: {
      type: String,
      required: true
    },
    isLocal: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      showPackContent: [],
      downloadSharedAs: ''
    }
  },
  computed: {
    currentFilesPage() {
      return this.$store.state.emojiPacks.currentRemoteFilesPage
    },
    currentRemotePacksPage() {
      return this.$store.state.emojiPacks.currentRemotePacksPage
    },
    isDesktop() {
      return this.$store.state.app.device === 'desktop'
    },
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
    labelWidth() {
      if (this.isMobile) {
        return '90px'
      } else if (this.isTablet) {
        return '120px'
      } else {
        return '120px'
      }
    },
    loadRemotePack() {
      return this.activeTab === this.name
    },
    pageSize() {
      return this.$store.state.emojiPacks.filesPageSize
    },
    remoteInstanceAddress() {
      return this.$store.state.emojiPacks.remoteInstance
    },
    remotePackFilesCount() {
      return this.$store.state.emojiPacks.remotePackFilesCount
    },
    share: {
      get() { return this.pack.pack['share-files'] },
      set(value) {
        this.$store.dispatch(
          'UpdateLocalPackVal',
          { name: this.name, key: 'share-files', value }
        )
      }
    },
    homepage: {
      get() { return this.pack.pack['homepage'] },
      set(value) {
        this.$store.dispatch(
          'UpdateLocalPackVal',
          { name: this.name, key: 'homepage', value }
        )
      }
    },
    description: {
      get() { return this.pack.pack['description'] },
      set(value) {
        this.$store.dispatch(
          'UpdateLocalPackVal',
          { name: this.name, key: 'description', value }
        )
      }
    },
    license: {
      get() { return this.pack.pack['license'] },
      set(value) {
        this.$store.dispatch(
          'UpdateLocalPackVal',
          { name: this.name, key: 'license', value }
        )
      }
    },
    fallbackSrc: {
      get() { return this.pack.pack['fallback-src'] },
      set(value) {
        if (value.trim() !== '') {
          this.$store.dispatch(
            'UpdateLocalPackVal',
            { name: this.name, key: 'fallback-src', value }
          )
        } else {
          this.$store.dispatch(
            'UpdateLocalPackVal',
            { name: this.name, key: 'fallback-src', value: null }
          )
          this.$store.dispatch(
            'UpdateLocalPackVal',
            { name: this.name, key: 'fallback-src-sha256', value: null }
          )
        }
      }
    }
  },
  methods: {
    collapse() {
      this.showPackContent = []
    },
    downloadFromInstance() {
      this.$store.dispatch(
        'DownloadFrom',
        { instanceAddress: this.remoteInstanceAddress, packName: this.name, as: this.downloadSharedAs }
      ).then(() => this.$store.dispatch('ReloadEmoji'))
        .then(() => this.$store.dispatch('FetchLocalEmojiPacks', this.currentPage))
    },
    handleChange(openTabs, name) {
      if (openTabs.includes('manageEmoji')) {
        this.$store.dispatch('FetchRemoteSinglePack', { name, page: 1 })
      }
    },
    handleFilesPageChange(page) {
      this.$store.dispatch('FetchRemoteSinglePack', { name: this.name, page })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
.download-archive {
  width: 250px
}
.download-pack-button-container {
  width: 265px;
  .el-link {
    width: inherit;
    span {
      width: inherit;
      .download-archive {
        width: inherit;
      }
    }
  }
}
.download-shared-pack {
  display: flex;
  margin-bottom: 10px;
}
.download-shared-pack-button {
  margin-left: 10px;
}
.el-collapse-item__content {
  padding-bottom: 0;
}
.el-collapse-item__header {
  height: 36px;
  font-size: 14px;
  font-weight: 700;
  color: #606266;
}
.emoji-pack-card {
  margin-top: 5px;
}
.emoji-pack-metadata {
  .el-form-item {
    margin-bottom: 10px;
  }
}
.files-pagination {
  margin: 25px 0;
  text-align: center;
}
.has-background .el-collapse-item__header {
  background: #f6f6f6;
}
.no-background .el-collapse-item__header {
  background: white;
}
.pack-button-container {
  margin: 0 0 18px 120px;
}
.save-pack-button-container {
  margin-bottom: 8px;
  width: 265px;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width:480px) {
  .delete-pack-button {
    width: 45%;
  }
  .download-pack-button-container {
    width: 100%;
  }
  .download-shared-pack {
    flex-direction: column;
  }
  .download-shared-pack-button {
    margin-left: 0;
    margin-top: 10px;
    padding: 10px;
  }
  .pack-button-container {
    width: 100%;
    margin: 0 0 22px 0;
  }
  .remote-pack-metadata {
    .el-form-item__content {
      line-height: 24px;
      margin-top: 4px;
    }
  }
  .save-pack-button {
    width: 54%;
  }
  .save-pack-button-container {
    margin-bottom: 8px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    button {
      padding: 10px 5px;
    }
    .el-button+.el-button {
      margin-left: 3px;
    }
  }
}
</style>
