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

import { useGetTodosByUserQuery } from "@/store/api/todosApi";
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
import { SizeEnum } from "@/constants/sizeEnum";
import { StatusTableItem } from "@/components/ui/StatusTableItem";
import { User } from "@/store/models/User.model";
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
import { NoData } from "@/components/ui/NoData";

interface PersonalTodoListProps {
  user: User;
}

export const PersonalTodoList = ({ user }: PersonalTodoListProps) => {
  const {
    data: todos,
    isLoading,
    isFetching,
    error,
    refetch,
  } = useGetTodosByUserQuery(user.id, { skip: !user.id });

  return (
    <View className="bg-lightGray rounded-md">
      <Text className="font-medium mt-0 mb-4 text-gray-600">To-Do List:</Text>
      {isLoading ? (
        <LoadingSpinner />
      ) : error ? (
        <NoData
          onRetry={refetch}
          message="Failed to load todos"
          isRetrying={isFetching}
        />
      ) : todos && todos.length > 0 ? (
        <View style={{ gap: 8 }}>
          {todos.map((todo) => (
            <View
              key={todo.id}
              className="bg-white rounded-lg p-4 mb-3 shadow-sm"
            >
              <View className="flex-row items-center justify-between mb-2">
                <Text
                  className="text-base font-medium flex-1 mr-2"
                  numberOfLines={10}
                >
                  {todo.task}
                </Text>
                <View className="flex-row items-center gap-2">
                  <StatusTableItem todoStatus={todo.status} />
                  <PriorityIndicator
                    priority={todo.priority}
                    size={SizeEnum.Small}
                  />
                </View>
              </View>
            </View>
          ))}
        </View>
      ) : (
        <Text className="font-medium text-black">
          {user.role === "USER"
            ? "No todos assigned for this user"
            : "No todos assigned"}
        </Text>
      )}
    </View>
  );
};