<template>
  <div class="swiper">
    <div class="swiper-container">
      <Splide ref="splide" :options="options">
        <slot />
      </Splide>
    </div>

    <div class="navigation">
      <button class="button" @click="splide.go('<')">
        <img :src="arrowIcon" width="9" height="16" class="arrow-icon" alt="arrow-icon" />
      </button>
      <button class="button" @click="splide.go('>')">
        <img :src="arrowIcon" width="9" height="16" class="arrow-icon" alt="arrow-icon" />
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from 'vue';
import { Splide } from '@splidejs/vue-splide';
import { Options, Splide as SplideInterface } from '@splidejs/splide';
import '@splidejs/splide/dist/css/splide-core.min.css';
import arrowIcon from '@/assets/img/static-icons/arrow/arrow-right-orange.svg?url';

export default defineComponent({
  components: { Splide },

  setup() {
    const splide = ref() as Ref<SplideInterface>;
    return { splide };
  },

  data: () => ({
    options: {
      type: 'slide',
      easing: 'ease-out',
      speed: 230,
      arrows: false,
      pagination: false,
      gap: 30,
      mediaQuery: 'min',
      perPage: 1,
      perMove: 1,
      autoWidth: true,
      breakpoints: {
        500: {
          perPage: 2,
        },
        0: {
          perPage: 1.05,
        },
      },
    } as Options,
    arrowIcon,
  }),
});
</script>

<style lang="scss" scoped>
.swiper {
  position: relative;

  .swiper-container {
    position: relative;

    width: 100%;
    max-width: 1115px;
    height: 100%;
    margin: 0 auto 60px auto;
    overflow: visible;
  }

  :deep(.splide__track) {
    overflow: visible;
  }
}

.navigation {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 5;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 1344px;
  height: 0;
  margin: 0 auto;
  padding: 0 32px;

  transform: translateY(-50%);
}

.button {
  &:first-child {
    transform: rotate(-180deg);
  }

  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;

  color: #242628;

  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;

  &:hover {
    .arrow-icon {
      filter: contrast(100%) grayscale(0%);
    }
  }
}

.arrow-icon {
  filter: contrast(1000%) grayscale(100%);

  transition: filter 0.3s ease-out;
}
</style>
