<template>
  <div class="gallery">
    <div class="gallery__images">
      <a
        href="#"
        class="gallery__prev"
        @click.prevent="prev()"
        v-show="activeImage > 0"
      ></a>
      <a
        href="#"
        class="gallery__next"
        @click.prevent="next()"
        v-show="activeImage < images.length - 1"
      ></a>

      <div class="gallery__viewport" :style="offset">
        <slot></slot>
      </div>
    </div>

    <nav class="gallery__navigation">
      <ul>
        <li v-for="(image, idx) in images" :key="idx">
          <a
            href="#"
            :class="{ active: activeImage === idx }"
            @click.prevent="setActive(idx)"
          ></a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: "gallery",
  data() {
    return {
      activeImage: 0,
      images: [],
    };
  },
  computed: {
    offset() {
      return `margin-left: -${this.activeImage * 100}%`;
    },
  },
  methods: {
    setActive(index) {
      this.activeImage = index;
    },
    prev() {
      if (this.activeImage > 0) {
        this.activeImage -= 1;
      }
    },
    next() {
      if (this.activeImage < this.images.length - 1) {
        this.activeImage += 1;
      }
    },
  },
  mounted() {
    const images = Array.from(this.$el.querySelectorAll("img"));
    this.images = images;
  },
};
</script>

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

.gallery {
  &__prev,
  &__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 1em;
    height: 1em;

    border: {
      top: 0.125em solid #fff;
      right: 0.125em solid #fff;
    }

    @include mq-desktop {
      width: 1.5em;
      height: 1.5em;
    }
  }

  &__prev {
    left: 1em;
    transform: rotate(-135deg);
  }

  &__next {
    right: 1em;
    transform: rotate(45deg);
  }

  &__images {
    position: relative;
    overflow: hidden;
  }

  &__viewport {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    width: 100%;
    height: 100%;

    transition: 0.3s all ease-in-out;

    figure {
      flex: 0 0 100%;

      display: flex;
      flex-flow: column nowrap;
      justify-content: center;

      width: 100vw;
      height: 100%;
      margin: 0;
      padding: 0 2em;

      @include mq-desktop {
        padding: 0 2.5em;
      }
    }

    picture {
      flex: 0 1 auto;
      text-align: center;
      max-height: 80%;
    }

    img {
      object-fit: contain;

      width: 100%;
      max-height: 50vh;

      @include mq-desktop {
        max-height: 80vh;
      }
    }

    figcaption {
      flex: 1 0 auto;
      text-align: center;

      p {
        margin: 0.5em auto;
      }
    }
  }

  &__navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    ul {
      flex: 0 1 auto;

      display: flex;
      flex-flow: row wrap;
      justify-content: center;

      list-style: none;
      margin: 1em 0;
      padding: 0;
    }

    li {
      flex: 0 1 auto;
      padding: 0.375em;

      a {
        display: block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 1em;
        background: rgba(#fff, 0.5);

        &.active {
          background: #fff;
        }
      }
    }
  }
}
</style>
