<script setup>
import { computed, inject, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const { selectedDeviceCog } = inject("system_selectedDevice");
const imgData = ref([]);

watch(
  selectedDeviceCog,
  (newValue) => {
    if (newValue) {
      imgData.value = newValue.oriFile.map(file => file.file_url);
    } else {
      imgData.value = [];
    }
  },
  { immediate: true }
);
</script>

<template>
  <a-carousel arrows class="mt-5 shadow-lg">
    <template #prevArrow>
      <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
        <font-awesome-icon
          :icon="['fas', 'chevron-left']"
          size="lg"
          class="text-[#1b1b1b]"
        />
      </div>
    </template>
    <template #nextArrow>
      <div class="custom-slick-arrow" style="right: 10px">
        <font-awesome-icon
          :icon="['fas', 'chevron-right']"
          size="lg"
          class="text-[#1b1b1b]"
        />
      </div>
    </template>
    <div v-for="(url, index) in imgData" :key="index">
      <img :src="`${FILE_BASEURL}/${url}`" alt="Image" />
    </div>
  </a-carousel>
</template>

<style scoped>
/* For demo */
:deep(.slick-slide) {
  text-align: center;
  background: #c5c5c5;
  height: 400px;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide img) {
  margin: auto;
}
</style>
