import { Image, Swiper } from "@queenjs/ui";
import { defineComponent, reactive, ref } from "vue";
import { array, string } from "vue-types";

export default defineComponent({
  props: {
    data: array<string>().isRequired,
    current: string().isRequired,
  },
  setup(props) {
    const carouselRef = ref();

    const index = props.data.findIndex((d) => d == props.current);

    const state = reactive({
      index: index,
    });

    return () => {
      const { data } = props;
      return (
        <div class="relative">
          <div class="absolute w-1/1 top-15px let-0 text-center z-9 text-shadow">
            {state.index + 1}/{data.length}
          </div>
          <Swiper
            onInit={(e) => (carouselRef.value = e)}
            options={{
              slidesPerView: 1,
              initialSlide: state.index,
              on: {
                slideChange: (e: any) => {
                  state.index = e.realIndex;
                },
              },
            }}
          >
            {data?.map((item, index) => (
              <Swiper.Slider
                key={index}
                class="!h-100vh flex felx-col items-center justify-center"
              >
                <div class="flex-1 max-h-1/1 overflow-y-auto">
                  <Image
                    src={item}
                    class="w-1/1 !object-contain bg-light-50"
                    size={800}
                  />
                </div>
              </Swiper.Slider>
            ))}
          </Swiper>
        </div>
      );
    };
  },
});