<template>

<div>
    <div v-if="type === 'images'" class="bg-indigo-100 overflow-hidden">
        <img :class="{ 'blur-sm': classActive }" class="object-contain h-48 w-full" :src="media.url" alt="">
    </div>
    <div v-if="type === 'videos'" class="overflow-hidden">
        <video :class="{ 'blur-sm': classActive }" class="object-contain h-48 w-full" :src="media.url" controls></video>
    </div>
    <div v-if="type === 'musics'" class="overflow-hidden">
        <div :class="{ 'blur-sm': classActive }" class="border border-indigo-100 flex flex-col items-center p-4">
            <MusicNoteIcon class="flex-shrink-0 w-12 h-12 text-indigo-300" />
            <div class="text-base text-gray font-medium">{{media.name}} / {{media.time}}</div>
        </div>
    </div>

    <button
        v-if="edit"
        :class="[classActive ? 'bg-green' : 'bg-pink']"
        class="block text-sm text-white w-full p-1"
        type="button" @click="stateToggle(media.id)">
        <span v-show="!classActive">Удалить</span>
        <span v-show="classActive">Восстановить</span>
    </button>
</div>

</template>

<script>
import { MusicNoteIcon } from "@heroicons/vue/solid";
export default {
  components: {
    MusicNoteIcon,
  },
  props: {
    media: Object,
    edit: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "images",
    },
  },
  emits: ["addRemoveId"],
  data() {
    return {
      activeItemId: 0,
    };
  },
  methods: {
    stateToggle(id) {
      if (this.activeItemId === 0) {
        this.activeItemId = id;
      } else {
        this.activeItemId = 0;
      }
      this.$emit("addRemoveId", id);
    },
  },
  computed: {
    classActive() {
      return this.media.id === this.activeItemId;
    },
  },
};
</script>
