import {
  View,
  Text,
  FlatList,
  Button,
  StyleSheet,
  Touchable,
  TouchableOpacity,
} from "react-native";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { ActivityTile } from "../../activity/components/activity_tile";
import { LIGHT_THEME } from "../../common/const/theme";
import { router } from "expo-router";
import { FloatingEndActionButton } from "../../common/components/floating_end_action_button";
import { useState } from "react";
import { useGetActivities } from "../../activity/hooks/useGetActivities";
import { useTranslation } from "react-i18next";

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

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

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

  if (requestStatus === ApiRequestStatus.ERROR || !activities) {
    return <Text>Something went wrong</Text>;
  }

  if (activities.length === 0) {
    return <Text>No activities found</Text>;
  }

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

  const handleGenerateRoute = () => {
    router.push(`/routes/generate_route_form?townId=${townId}`);
  };

  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()}
      />
      <FloatingEndActionButton
        onPress={handleGenerateRoute}
        title={t("selectTownActivityScreen.generateRouteButton")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 10,
  },
  activities_container: {
    flex: 1,
    width: "100%",
  },
});
