<template>
  <div class="media-selector">
    <div class="element"
         v-for="m in mediaObjects"
         v-bind:key="m.identifier"
         @click="$emit('click', m.index)">
      <img alt="media" :src="m.src"
           :srcset="m.srcset" :sizes="m.sizes">

      <div class="active" v-if="m.index === current"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "media-selector",
  props: ['projectId', 'media', 'current', 'socket'],
  data: function() {
    return {
      sizes: [200, 350, 500]
    }
  },
  computed: {
    mediaObjects: function() {
      let index = 0;
      return this.media.map(e => {
        const src = this.socket.media(this.projectId, e.identifier);

        return {
          index: index++,
          src: src,
          srcset: this.sizes.map(e => src + '/' + e + ' ' + e + 'w').join(','),
          sizes: '5rem'
        }
      });
    }
  }
}
</script>

<style scoped>
.media-selector {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.element {
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  border-left: 2px solid rgba(0, 0, 0, 0.5);
  border-right: 2px solid rgba(0, 0, 0, 0.5);
}

.element:not(:last-child) {
  border-right: none;
}

.active {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 0 20px -5px var(--primary) inset;
}

img {
  max-width: 100%;
  max-height: 100%;
}
</style>