<template>
  <tr v-if="list" class="asset-list-item" @click="chooseAsset" :class="{selected: selected}" tabindex="0" role="button">
    <td v-if="permissions.canUpdate && selectable">
      <checkbox v-model="selectedModel" :id="'checkbox-' + asset.id" />
    </td>
    <td>
      <div class="image-container">
        <img class="image" :src="previewUrl" />
        <div class="card image-hover" v-if="!isPdf">
          <img :src="previewUrl" :alt="asset.title + ' afbeelding vergroting'">
        </div>
      </div>
    </td>
    <td>{{ asset.title }}</td>
    <td>{{ createdDate }}</td>
    <td>{{ modifiedDate }}</td>
    <td>{{ modifiedBy }}</td>
    <td>{{ contentType }}</td>
    <td>{{ assetTags || '-' }}</td>
  </tr>
  <div class="col mb-3 px-2" v-else>
    <div class="asset-grid-item card h-100" @click="chooseAsset" :class="{selected: selected}" tabindex="0">
      <div class="card-body p-0">
        <checkbox v-if="permissions.canUpdate && selectable" v-model="selectedModel" :id="'checkbox-' + asset.id" />
        <img class="card-img" :src="previewUrl" />
      </div>
      <div class="card-footer">
        <strong>{{ asset.title }}</strong><br>
        <span v-if="assetTags" class="asset-tags">{{ assetTags }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import Checkbox from '../shared/form/checkbox.vue';

import { getPreviewUrlForAsset } from '../api/asset-api-helpers';
import { Asset, AssetTag } from '../types/api';
import DateUtils from '../tools/date-utils';
import { PermissionListModel } from '../stores/types/PermissionStoreModel';

// @ts-ignore
import pdfImage from '../images/pdf.png';
// @ts-ignore
import videoImage from '../images/video.png';
const AssetTagStore = namespace('cmsTag');
const PermissionStore = namespace('permissions');

@Component({
  components: {
    Checkbox
  }
})
export default class AssetOverviewItem extends Vue {
  @Prop({ required: true }) readonly value!: Asset;
  @Prop({ type: Object, required: true }) readonly asset!: Asset;
  @Prop({ type: Boolean, required: true }) readonly selected!: boolean;
  @Prop({ type: Boolean, default: true }) readonly selectable!: boolean;
  @Prop({ type: Boolean, default: true }) readonly list!: boolean;

  @AssetTagStore.Getter('getItemsByGuids') getItemsByGuids!: (guids: string[]) => AssetTag[];
  @PermissionStore.Getter('getPermissions') readonly getPermissions!: (itemName: string) => PermissionListModel;

  chooseAsset() {
    this.$emit('input', this.asset);
  }

  get selectedModel() {
    return this.selected;
  }

  set selectedModel(value: boolean) {
    this.$emit('toggle', this.asset);
  }

  get isPdf(): boolean {
    return this.asset.contentType.indexOf('pdf') > -1;
  }

  get isVideo(): boolean {
    return this.asset.contentType.indexOf('video') > -1;
  }

  get contentType(): string {
    return this.asset.contentType.substring(this.asset.contentType.lastIndexOf('/') + 1);
  }

  get previewUrl(): string {
    if (this.isPdf) {
      return pdfImage;
    }

    if (this.isVideo) {
      return videoImage;
    }

    return getPreviewUrlForAsset(this.asset);
  }

  get createdDate(): string {
    return DateUtils.formatDateString(this.asset.created);
  }

  get modifiedDate(): string {
    return DateUtils.formatDateString(this.asset.modified);
  }

  get modifiedBy(): string {
    return this.asset.modifiedBy?.replace('Bootstrapped user: ', '') || this.asset.createdBy?.replace('Bootstrapped user: ', '') || '-';
  }

  get assetTags(): string {
    return this.getItemsByGuids(this.asset.tagIds).map(tag => tag.title).join(', ');
  }

  get permissions(): PermissionListModel {
    return this.getPermissions('CmsAsset');
  }
}
</script>

<style lang="scss" scoped>
@import '../variables';

.asset-list-item,
.asset-grid-item {
  cursor: pointer;
}

.asset-list-item {
  &.selected {
    background-color: rgba(0, 0, 0, .05);
  }

  &:last-child {
    border-bottom: 1px solid #dee2e6;
  }

  input {
    cursor: pointer;
  }

  td {
    vertical-align: middle;

    input {
      position: relative;
    }
  }

  .image-container {
    $image-size: 40px;

    position: relative;
    width: $image-size;

    .image {
      object-fit: contain;
      width: $image-size;
      height: $image-size;
    }

    &:hover .image-hover {
      display: block;
    }

    .image-hover {
      $image-hover-size: 240px;
      $image-hover-transform: calc($image-hover-size / 2);

      display: none;
      position: absolute;
      top: 50%;
      transform: translateY($image-hover-transform);
      right: -$image-hover-size - 20px;
      z-index: 10;

      img {
        object-fit: contain;
        width: $image-hover-size;
        height: $image-hover-size;
      }
    }
  }
}

.asset-grid-item {
  transition: background-color .15s ease-in-out;

  &:hover {
    border-color: rgba(0, 0, 0, .3);
  }

  &.selected {
    border-color: #007bff;
    background-color: rgba(#007bff, 0.2);

    .card-img {
      transform: scale(.8);
    }
  }

  .card-img {
    $image-size: 200px;

    height: $image-size;
    object-fit: contain;
    transition: transform .15s ease-in-out;

    &::after {
      display: block;
      position: relative;
      background-image: linear-gradient(to bottom, transparent 0%, white 100%);
      margin-top: -150px;
      height: 150px;
      width: 100%;
      content: '';
    }
  }

  .card-footer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .asset-tags {
    font-size: .9rem;
  }

  ::v-deep .checkbox {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
  }
}

</style>
