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

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

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

export const DesktopTodoListItem = ({
  item,
  dialogOpen,
  setDialogOpen,
}: DesktopTodoListItemProps) => {
  return (
    <View className="flex-1">
      <View className="flex-row items-center">
        <Text className="text-base font-medium flex-1 mr-2" numberOfLines={1}>
          {item.title || item.task}
        </Text>
        <View className="flex-row items-center gap-2">
          <StatusTableItem todoStatus={item.status} />
          <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-700 mt-0.5" numberOfLines={2}>
        {item.task}
      </Text>
    </View>
  );
};