<template>
  <div class="project-content-container mb-xl">
    <Title tag="h5" class="mb-m">{{ $_tr('title') }}</Title>

    <component-listing
      id="project-content-listing"
      :static-data="content"
      :pagination="false"
      :use-grid="false"
    >
      <template #default="{ item }">
        <img
          v-if="item.image"
          :src="$_getContentImage(item.image, 'image-card')"
          alt="project_images"
          class="image-item"
          @click="openCurrentContent(item.image)"
        />

        <div
          v-else-if="item.file"
          class="video-container"
          @click="openCurrentContent(item.file.path)"
        >
          <video controls :src="`/${item.file.path}`" class="image-item" />
        </div>
      </template>
    </component-listing>

    <transition name="fadeIn">
      <ImagePreviewUi
        v-if="openImagePreview"
        :content="currentContent"
        @onClose="onCloseGallery"
      />
    </transition>
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'

import ImagePreviewUi from '@inside-ui/ImagePreviewUi'

export default {
  name: 'ProjectImages',
  $_i18nRootPath: 'customs.PROJECTS.images',
  components: {
    Title,
    ImagePreviewUi
  },
  props: {
    content: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentContent: null,
      openImagePreview: false
    }
  },
  methods: {
    openCurrentContent(item) {
      this.currentContent = item
      this.openImagePreview = true
    },
    onCloseGallery() {
      this.currentContent = null
      this.openImagePreview = false
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.project-content-container {
  .component-listing.use-flex > .listing-container > .data-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: var(--spacing-xs);

    @include mobile {
      justify-content: center;
    }
  }

  .video-container {
    cursor: pointer;
    position: relative;
  }

  .image-item {
    width: 180px;
    height: 118px;
    object-fit: cover;
    cursor: pointer;

    @include mobile {
      width: 150px;
    }
  }

  .video-container::after {
    background-image: url('../../assets/img/videoPlayer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 118px;

    @include mobile {
      width: 150px;
    }
  }
}
</style>
