<template>
  <div class="gallery">
    <div class="gallery__bigimage">
      <figure class="gallery__imagecontainer">
        <img :src="bigImage" alt="" />
        <figcaption>
          {{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
        </figcaption>
      </figure>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "gallery",
  data() {
    return {
      bigImage: "",
      images: []
    };
  },
  methods: {
    setBigImage(index) {
      this.bigImage = this.images[index];
    }
  },
  mounted() {
    const images = Array.from(this.$el.querySelectorAll("li img"));

    images.forEach((img, idx) => {
      img.addEventListener("click", e => {
        e.preventDefault();
        this.setBigImage(idx);
      });
    });

    this.images = images.map(img => img.src);
    this.bigImage = images[0].src;
  }
};
</script>

<style lang="scss">
@import "@scss/_variables.scss";

.gallery {
  &__bigimage {
    width: 100%;
    height: 40vh;

    @media (min-width: 35em) {
      height: 30em;
    }

    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;

    background-color: $copy-color-darkgrey;

    overflow: hidden;
  }

  &__imagecontainer {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    box-shadow: inset 0 0 15em #000;

    img {
      align-self: center;
      max-width: 100%;
      max-height: 100%;
    }

    figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(#000, 0.5);
      color: $copy-color;
      text-align: center;
    }
  }

  ul {
    display: flex;
    list-style: none;
    height: 6.5em;
    margin: 0;
    padding: 0.5em;
    overflow-x: scroll;
    background-color: $copy-color-darkgrey;
  }

  li {
    flex: 1 0 auto;
    text-align: center;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    & + li {
      margin-left: 0.5em;
    }

    img {
      cursor: pointer;
      border: 0.25em solid #fff;
      align-self: center;
      max-width: 100%;
      max-height: 100%;
    }
  }
}
</style>
