import * as React from "react";
import { View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import {
	Carousel,
	CarouselRef,
	Pagination,
} from "react-native-reanimated-carousel";
 
import { renderItem } from "@/utils/render-item";
 
const defaultDataWith6Colors = [
	"#B0604D",
	"#899F9C",
	"#B3C680",
	"#5C6265",
	"#F5D399",
	"#F1F1F1",
];
 
const PAGE_WIDTH = 430;
 
function Index() {
	const progress = useSharedValue<number>(0);
	const baseOptions = {
		orientation: "horizontal",
	} as const;
 
	const ref = React.useRef<CarouselRef>(null);
 
	const onPressPagination = (index: number) => {
		ref.current?.scrollTo({
			index,
			animated: true,
		});
	};
 
	return (
		<View
			id="carousel-component"
			dataSet={{ kind: "utils", name: "pagination" }}
			style={{ gap: 10 }}
		>
			<View style={{ marginBottom: 10 }}>
				<Carousel
					ref={ref}
					{...baseOptions}
					loop
					progress={progress}
					contentContainerStyle={{ width: PAGE_WIDTH }}
					style={{ width: PAGE_WIDTH, height: PAGE_WIDTH * 0.6 }}
					data={defaultDataWith6Colors}
					renderItem={renderItem({ rounded: true })}
				/>
			</View>
 
			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{ backgroundColor: "#262626" }}
				activeDotStyle={{ backgroundColor: "#f1f1f1" }}
				containerStyle={{ gap: 5, marginBottom: 10 }}
				onPress={onPressPagination}
				getItemAccessibilityLabel={(index, count) =>
					`Color slide ${index + 1} of ${count}`
				}
			/>
 
			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{
					width: 25,
					height: 4,
					backgroundColor: "#262626",
				}}
				activeDotStyle={{
					backgroundColor: "#f1f1f1",
				}}
				containerStyle={{
					gap: 10,
					marginBottom: 10,
				}}
				onPress={onPressPagination}
				getItemAccessibilityLabel={(index, count) =>
					`Color ${index + 1} of ${count}`
				}
			/>
 
			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{
					width: 20,
					height: 20,
					borderRadius: 100,
					backgroundColor: "#262626",
				}}
				activeDotStyle={{
					borderRadius: 100,
					backgroundColor: "#f1f1f1",
				}}
				containerStyle={[
					{
						gap: 5,
						marginBottom: 10,
					},
				]}
			/>
 
			<Pagination
				count={defaultDataWith6Colors.length}
				progress={progress}
				dotStyle={{
					width: 20,
					height: 20,
					borderRadius: 16,
					backgroundColor: "#262626",
				}}
				activeDotStyle={{
					borderRadius: 8,
					width: 40,
					height: 30,
					backgroundColor: "#f1f1f1",
				}}
				containerStyle={{
					gap: 5,
					marginBottom: 10,
					alignItems: "center",
					minHeight: 30,
				}}
				onPress={onPressPagination}
			/>
		</View>
	);
}
 
export default Index;