import { View, ActivityIndicator } from "react-native";
import { pageStyles } from "../page_styles";
import { useGetStates } from "../../hooks/useGetStates";
import { ApiRequestStatus } from "../../constants/api_request_states";
import { Caroussel } from "../../components/caroussel/caroussel";
import { router } from "expo-router";
import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";
import { AnimatedBackground } from "../../components/animated_background/animated_background";

export const StateSelectionPage = () => {
  const { data, requestStatus } = useGetStates();
  const { selectedStateIndex, onIndexChange, backgroundImageAnimation } =
    useAnimatedSelectedIndex(200, 200);

  if (requestStatus === ApiRequestStatus.LOADING) {
    return (
      <View style={pageStyles.page_container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  const handleOnPress = (id: number) => {
    router.push(`/state/${id}`);
  };

  return (
    <View style={pageStyles.page_container}>
      <AnimatedBackground
        imageUri={data[selectedStateIndex].imageUri}
        backgroundImageAnimation={backgroundImageAnimation}
      />
      <Caroussel
        data={data}
        onPress={handleOnPress}
        onIndexChange={onIndexChange}
      />
    </View>
  );
};
