import { View, StyleSheet, Text, Image } from "react-native";
import { Entypo } from "@expo/vector-icons";
import { LIGHT_THEME } from "../../common/const/theme";
import { FlatList } from "react-native-gesture-handler";
import { ActivityRouteEntity } from "../../activity/domain/entities/activity_info_entity";

interface RouteActivityTileProps {
  activity: ActivityRouteEntity;
  isFirst: boolean;
  isLast: boolean;
}

export const RouteActivityTile = ({
  activity,
  isLast,
  isFirst,
}: RouteActivityTileProps) => {
  return (
    <View style={styles.container}>
      <View style={styles.sideIndicator}>
        <View
          style={{
            ...styles.splitter,
            backgroundColor: isFirst ? "transparent" : "grey",
          }}
        />
        <Entypo name="circle" size={15} color="black" />
        <View
          style={{
            ...styles.splitter,
            backgroundColor: isLast ? "transparent" : "grey",
          }}
        />
      </View>
      <View style={styles.activityContainer}>
        <Image
          source={{ uri: activity.imageUri }}
          style={{ width: 100, height: "100%", borderRadius: 10 }}
          resizeMode="cover"
        />
        <View style={styles.activityInfoContainer}>
          <Text style={styles.activityNameText} numberOfLines={1}>
            {activity.name}
          </Text>
          <Text numberOfLines={1}>{activity.startTime.toISOString()}</Text>
          <Text numberOfLines={1}>{activity.location}</Text>
          <FlatList
            data={activity.tags}
            style={{ position: "absolute", bottom: 0 }}
            keyExtractor={(index) => index.toString()}
            renderItem={({ item }) => <Text style={styles.tag}>{item}</Text>}
            horizontal
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 200,
    width: "100%",
    flexDirection: "row",
  },
  sideIndicator: {
    height: "100%",
    alignItems: "center",
    gap: 10,
    width: 40,
  },
  splitter: {
    width: 2,
    flex: 1,
  },
  activityContainer: {
    flex: 1,
    margin: 10,
    backgroundColor: LIGHT_THEME.color.white,
    elevation: 5,
    padding: 10,
    borderRadius: 10,
    flexDirection: "row",
    gap: 10,
  },
  activityInfoContainer: {
    flex: 1,
    gap: 5,
  },
  activityNameText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  tag: {
    backgroundColor: LIGHT_THEME.color.primary,
    height: 30,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 15,
    marginRight: 10,
    color: LIGHT_THEME.color.white,
    justifyContent: "center",
    alignItems: "center",
  },
});
