import {
  View,
  Text,
  FlatList,
  Button,
  StyleSheet,
  Touchable,
  TouchableOpacity,
} from "react-native";
import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
import { ApiRequestStatus } from "../../constants/api_request_states";
import { useGetActivities } from "../../hooks/useGetActivities";
import { ActivityTile } from "../../components/activity_tile/activity_tile";
import { LIGTHT_THEME } from "../../constants/theme";
import { router } from "expo-router";

interface TownActivitiesPageProps {
  townId: number;
  stateId: number;
}

export const TownActivitiesPage = ({ townId, stateId }: TownActivitiesPageProps) => {
  const { activities, requestStatus } = useGetActivities(townId);

  if (requestStatus === ApiRequestStatus.LOADING) {
    return <FullPageLoader />;
  }

  const handleViewActivity = (activityId: number) =>{
    router.push(`/state/${stateId}/town/${townId}/activity/${activityId}/`);
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={activities}
        style={styles.activities_container}
        renderItem={({ item }) => <ActivityTile onPress={handleViewActivity} activity={item} />}
        ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
        ListFooterComponent={() => <View style={{ height: 70 }} />}
        keyExtractor={(item) => item.id.toString()}
      />
      <TouchableOpacity
        style={styles.generate_route_button}
        activeOpacity={0.8}
      >
        <Text style={styles.generate_router_button_text}>Generate Route</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 10,
  },
  activities_container: {
    flex: 1,
    width: "100%",
  },
  generate_route_button: {
    position: "absolute",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: LIGTHT_THEME.color.primary,
    borderRadius: 25,
    bottom: 10,
    width: 200,
    height: 50,
  },
  generate_router_button_text: {
    color: LIGTHT_THEME.color.white,
  },
});
