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

import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
import { allowAuthenticatedAction } from "../../../shared/helpers.js";
import type { FeedbackScreenCommentBranchProps } from "../../../shared/types";
import { Button } from "./Button";
import { Comment, FeedbackForm } from "./primitives.js";
import { useNativeAction } from "../helpers.js";

import type { FeedbackScreenReplyListProps } from "../../../shared/types";

export function ReplyList({
  entryId,
  parentCommentId,
}: FeedbackScreenReplyListProps) {
  const { hooks, commentSort, transformComments } = useFeedbackBody();
  const { messages } = useFeedbackUi();

  const replies = hooks.useComments({
    entryId,
    parentCommentId,
    sort: commentSort,
  });

  const visible = useMemo(
    () => transformComments?.(replies.results) ?? replies.results,
    [replies.results, transformComments],
  );

  return (
    <Comment.Children>
      {visible.map((reply) => (
        <CommentBranch key={reply.id} comment={reply} entryId={entryId} />
      ))}
      {(replies.status === "CanLoadMore" ||
        replies.status === "LoadingMore") && (
        <Button
          label={messages.comments.loadMore}
          disabled={replies.status === "LoadingMore"}
          onPress={() => replies.loadMore(hooks.pageSizes.replies)}
        />
      )}
    </Comment.Children>
  );
}

export function CommentBranch({
  comment,
  entryId,
}: FeedbackScreenCommentBranchProps) {
  const {
    hooks,
    maxCommentDepth,
    renderActor,
    isAuthenticated,
    onUnauthenticated,
  } = useFeedbackBody();
  const { messages } = useFeedbackUi();
  const [expanded, setExpanded] = useState(false);
  const [replying, setReplying] = useState(false);
  const [replyBody, setReplyBody] = useState("");
  const setLike = hooks.useSetCommentLike();
  const createComment = hooks.useCreateComment();
  const likeAction = useNativeAction();
  const replyAction = useNativeAction();

  const toggleLike = (desiredState: boolean) => {
    if (
      !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
      likeAction.pending
    ) {
      return;
    }
    void likeAction.run(
      () => setLike({ commentId: comment.id, desiredState }),
      "Could not update like",
    );
  };

  return (
    <Comment.Root comment={comment}>
      {renderActor === undefined ? null : (
        <View>{renderActor(comment.actorId)}</View>
      )}
      <Comment.Body />
      <View
        style={{
          flexDirection: "row",
          flexWrap: "wrap",
          alignItems: "center",
          gap: 4,
        }}
      >
        <Comment.Like
          disabled={isAuthenticated === undefined || likeAction.pending}
          onToggle={toggleLike}
        />
        {comment.depth < maxCommentDepth ? (
          <Comment.Reply
            disabled={isAuthenticated === undefined || replyAction.pending}
            onActivate={() => {
              if (
                allowAuthenticatedAction(isAuthenticated, onUnauthenticated)
              ) {
                setReplying((value) => !value);
              }
            }}
          />
        ) : null}
        <Comment.RepliesButton
          expanded={expanded}
          onExpandedChange={setExpanded}
        />
      </View>
      {replying ? (
        <FeedbackForm.Root>
          <FeedbackForm.Textarea
            value={replyBody}
            onChangeText={setReplyBody}
            placeholder={messages.comments.placeholder}
          />
          <FeedbackForm.Submit
            disabled={isAuthenticated === undefined || replyAction.pending}
            submitting={replyAction.pending}
            onPress={() => {
              if (replyBody.trim().length === 0) return;
              if (
                !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
                replyAction.pending
              ) {
                return;
              }
              void replyAction.run(async () => {
                await createComment({
                  entryId,
                  parentCommentId: comment.id,
                  body: replyBody,
                });
                setReplyBody("");
                setReplying(false);
                setExpanded(true);
              }, "Could not add reply");
            }}
          >
            {messages.comments.reply}
          </FeedbackForm.Submit>
          <Button
            label={messages.comments.cancelReply}
            onPress={() => setReplying(false)}
          />
        </FeedbackForm.Root>
      ) : null}
      {expanded ? (
        <ReplyList entryId={entryId} parentCommentId={comment.id} />
      ) : null}
    </Comment.Root>
  );
}