import { useState } from "react";
import { View } from "react-native";

import { Todo } from "@/store/models/Todo.model";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
import { MobileTodoListItem } from "@/components/features/dashboard/todo/MobileTodoListItem";
import { DesktopTodoListItem } from "@/components/features/dashboard/todo/DesktopTodoListItem";

interface ToDoListItemProps {
  item: Todo;
}

export const ToDoListItem = ({ item }: ToDoListItemProps) => {
  const isMobile = useAppSelector(selectIsMobile);
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <View className="bg-white rounded-lg p-4 mb-3 shadow-sm">
      <View className="flex-row items-center justify-between mb-2">
        {isMobile ? (
          <MobileTodoListItem
            dialogOpen={dialogOpen}
            setDialogOpen={setDialogOpen}
            item={item}
          />
        ) : (
          <DesktopTodoListItem
            dialogOpen={dialogOpen}
            setDialogOpen={setDialogOpen}
            item={item}
          />
        )}
      </View>

      <TodoDetailsModal
        visible={dialogOpen}
        todo={item}
        onClose={() => setDialogOpen(false)}
      />
    </View>
  );
};