import React, { useState } from "react"
import { View, Dimensions } from "react-native"
import Swiper from "react-native-swiper"
import { OfferItem } from "./sliderItem"
import { OfferItemType } from "./sliderItem/types"
import styles from "../headerContainer/styles"
import { windowHeight } from "@src/themes"
import { useValues } from "@src/utils/context"

const { width } = Dimensions.get("window")

export function HomeSlider({
  bannerData,
  style,
}: {
  bannerData: OfferItemType[]
  style?: any
}) {
  const { isRTL } = useValues()
  const [currentIndex, setCurrentIndex] = useState(0)

  const bannerDataArray: OfferItemType[] = bannerData || []

  return (
    <View style={[styles.swipeContainer, style]}>
      <Swiper
        loop
        autoplay
        autoplayTimeout={5}
        horizontal
        index={currentIndex}
        onIndexChanged={(index) => setCurrentIndex(index)}
        showsPagination
        paginationStyle={styles.paginationContainer}
        dotStyle={styles.paginationDot}
        activeDotStyle={styles.activeDot}
        removeClippedSubviews={false}
        scrollEnabled
        nestedScrollEnabled
      >
        {bannerDataArray.map((item, index) => (
          <View
            key={index}
            style={{ width, height: windowHeight(155) }}
          >
            <OfferItem item={item} />
          </View>
        ))}
      </Swiper>
    </View>
  )
}
