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

import { DialogContainer } from "@/components/ui/DialogContainer";
import { Todo } from "@/store/models/Todo.model";
import { StatusTableItem } from "@/components/ui/StatusTableItem";
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
import { SizeEnum } from "@/constants/sizeEnum";
import { formatDate } from "@/utils/dateUtils";
import { TodoComments } from "@/components/features/todos/TodoComments";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";

interface TodoDetailsModalProps {
  visible: boolean;
  todo: Todo;
  onClose: () => void;
}

export const TodoDetailsModal = ({
  visible,
  todo,
  onClose,
}: TodoDetailsModalProps) => {
  const isMobile = useAppSelector(selectIsMobile);

  return (
    <DialogContainer visible={visible} onDismiss={onClose}>
      <Dialog.Title>
        <View className="w-full flex-row items-center justify-between">
          <View className="flex-1">
            <Text className="pr-3">{todo.title}</Text>
          </View>

          <View
            style={{
              alignSelf: "flex-start",
              alignItems: "center",
              flexDirection: "row",
            }}
          >
            <View className="flex-row items-center gap-2">
              <StatusTableItem todoStatus={todo.status} />
              <PriorityIndicator
                priority={todo.priority}
                size={SizeEnum.Small}
              />
            </View>

            <IconButton
              icon="close"
              size={20}
              onPress={onClose}
              accessibilityLabel="Close dialog"
              style={{ margin: 0 }}
            />
          </View>
        </View>
      </Dialog.Title>
      <Dialog.Content>
        <View className={isMobile ? "flex-col" : "flex-row"}>
          <View className={isMobile ? "w-full" : "w-1/2 pr-2"}>
            <View className="mb-2">
              <Text className="text-lg">Due: {formatDate(todo.dueDate)}</Text>
            </View>
            <Text className="text-base">{todo.task}</Text>
          </View>

          {isMobile ? (
            <View
              style={{
                height: 2,
                backgroundColor: "#000000",
                marginVertical: 12,
                borderRadius: 1,
              }}
            />
          ) : (
            <View
              style={{
                width: 2,
                backgroundColor: "#000000",
                marginHorizontal: 12,
                alignSelf: "stretch",
                borderRadius: 1,
              }}
            />
          )}

          <View className={isMobile ? "w-full mt-4" : "w-1/2 pl-4 pr-6"}>
            <TodoComments todoId={todo.id} />
          </View>
        </View>
      </Dialog.Content>
    </DialogContainer>
  );
};