<template>
  <div class="d-flex flex-col container">
    <slot />
    <div class="d-flex flex-row align-center bar">
      <div class="btn" tabindex="0">
        <img src="@/assets/images/ButtonLeft.png" @click="scrollLr('left')" />
        <img src="@/assets/images/ImageDotRight.png" class="dot" @click="scrollLr('left')" />
      </div>
      <div class="w-20 flex-shrink-0"></div>
      <div class="btn" tabindex="0">
        <img src="@/assets/images/ImageDotLeft.png" class="dot" @click="scrollLr('right')" />
        <img src="@/assets/images/ButtonRight.png" @click="scrollLr('right')" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

const emit = defineEmits([ 'left','right' ])
const props = defineProps({
  scrollRect: {
    type: Object,
    default: null
  },
  scrollWidth: {
    type: Number,
    default: 200
  }
})

function scrollLr(direction: 'left' | 'right') {
  const scrollRect = props.scrollRect;
  if (!scrollRect) {
    emit(direction)
    return
  }
  const scrollWidth = props.scrollWidth;
  const scrollContainer = scrollRect.getScrollContainer() as HTMLElement;
  if (direction === 'left') {
    scrollContainer.scrollTo({ 
      left: scrollContainer.scrollLeft - scrollWidth, 
      behavior: 'smooth',
    });
  } else {
    scrollContainer.scrollTo({ 
      left: scrollContainer.scrollLeft + scrollWidth, 
      behavior: 'smooth',
    });
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 60px;

  .btn {
    cursor: pointer;

    &:active {
      transform: scale(0.9);
    }
    &:focus {
      outline: 2px solid #444;
    }
  }
}
.bar {
  width: 350px;
  margin-right: 50px;
}

img {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin: 0 20px;

  &.dot {
    width: 40px;
    height: 14px;
    margin: 0;
    filter: grayscale(1);
  }
}
</style>