<template>
  <ScrollLeftRightButton
    class="d-flex flex-row align-center w-100 position-relative"
    @right="activeItem = Math.min(activeItem + 1, list.length - 1)"
    @left="activeItem = Math.max(activeItem - 1, 0)"
  >
    <div :class="'list ' + (full ? 'full' : 'w-80')">
      <div>
        <div class="item" />
        <Box2 
          v-for="(item, index) in list"
          :key="index"
          :class="['item', { 'active': activeItem === index }]"
          :id="'listItem' + index" 
          round
          tabindex="0"
          @click="onItemClick(item, index)"
        >
          <div v-if="item.tag" class="tag">{{ item.tag }}</div>
          <div class="inner">
            <img :src="item.image" />
          </div>
        </Box2>
        <div class="item" />
      </div>
    </div>
  </ScrollLeftRightButton>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch, type PropType } from 'vue';
import ScrollLeftRightButton from './ScrollLeftRightButton.vue';
import Box2 from './Box2.vue';

const emit = defineEmits([ 'itemClick', 'updateCurrentItem' ])
const props = defineProps({
  list: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  full: {
    type: Boolean,
    default: false,
  },
});
const activeItem = ref(-1);

function onItemClick(iiem: any, index: number) {
  activeItem.value = index;
  emit('itemClick', iiem, index);
}

watch(activeItem, () => {
  document.querySelector('#listItem' + activeItem.value)?.scrollIntoView({
    behavior: 'smooth',
    inline: 'center',
  });
  emit('updateCurrentItem', activeItem.value);
})

onMounted(() => {
  nextTick(() => {
    activeItem.value = 0;
  })
})
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  overflow: hidden;
  overflow-x: scroll;
  height: 20vw;

  &::-webkit-scrollbar {
    display: none;
  }

  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  }

  &.full {
    height: 25vw;

    .item {
      width: 16vw;
      height: 16vw;
      margin: 0 2vw;

      &.active {
        width: 25vw;
        height: 25vw;
      }
    }
  }
}
.item {
  flex-shrink: 0;
  width: 14vw;
  height: 14vw;
  margin: 0 4vw;
  transition: all 0.3s ease-in-out;
  overflow: visible;
  cursor: pointer;

  
  &:focus {
    outline: 3px solid #837146;
  }
  &.active {
    width: 20vw;
    height: 20vw;
    margin: 0;

    .tag {
      top: 0px;
    }
  }

  .tag {
    position: absolute;
    top: -20px;
    right: -20px;
    writing-mode: vertical-lr;
    padding: 6px;
    border: 1px solid var(--color-border);
    color: var(--color-text-second);
    background-color: var(--color-light-bg);
    font-size: 24px;
  }
  .inner {
    width: 100%;
    height: 100%;
    padding: 30px;
  }
  img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>