import { Pressable, View } from "react-native";
import { Badge, Text } from "react-native-paper";

import { SizeEnum } from "@/constants/sizeEnum";
import { TodoStatusColors } from "@/constants/todoStatusEnum";
import { Ionicons } from "@expo/vector-icons";
import { Todo } from "@/store/models/Todo.model";
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";

interface MobileTodoListItemProps {
  item: Todo;
  dialogOpen: boolean;
  setDialogOpen: (open: boolean) => void;
}

export const MobileTodoListItem = ({
  item,
  dialogOpen,
  setDialogOpen,
}: MobileTodoListItemProps) => {
  return (
    <View className="flex-1">
      <View className="flex-row items-center mb-2">
        <View className="mr-2">
          <Badge
            size={12}
            style={{ backgroundColor: TodoStatusColors[item.status] }}
          />
        </View>
        <Text className="font-bold flex-1 flex-wrap" numberOfLines={0}>
          {item.title}
        </Text>
        <View className="ml-2">
          <PriorityIndicator priority={item.priority} size={SizeEnum.Small} />
        </View>
        <Pressable onPress={() => setDialogOpen(true)}>
          <Ionicons
            name="eye-outline"
            size={20}
            color="black"
            style={{ marginLeft: 5 }}
          />
        </Pressable>
      </View>
      <Text className="text-sm text-gray-600" numberOfLines={2}>
        {item.task}
      </Text>
    </View>
  );
};