import { useState } from "react";

import { api } from "~/utils/api";

type CommentFormProps = {
  postId: string;
};

const inputClassName =
  "w-full rounded-[18px] border border-white/12 bg-[#0b1320] px-4 py-3 text-sm text-white outline-none transition placeholder:text-[#6c7790] focus:border-[#9db6ff] focus:bg-[#101928]";

export const CommentForm = ({ postId }: CommentFormProps) => {
  const utils = api.useUtils();
  const [body, setBody] = useState("");
  const [message, setMessage] = useState<string | null>(null);

  const createComment = api.comment.create.useMutation({
    onSuccess: async () => {
      setBody("");
      setMessage("Comment created.");
      await utils.post.byId.invalidate({ postId });
    },
    onError: (error) => {
      setMessage(error.message);
    },
  });

  return (
    <section className="rounded-[26px] border border-white/12 bg-[#0a1220]/85 p-5">
      <div className="flex flex-col gap-2">
        <p className="font-mono text-[#99b6ff] text-[11px] uppercase tracking-[0.24em]">Protected write route</p>
        <h2 className="text-xl tracking-[-0.04em]">Add a comment</h2>
      </div>

      <form
        className="mt-5 space-y-4"
        onSubmit={(event) => {
          event.preventDefault();
          setMessage(null);
          createComment.mutate({
            body,
            postId,
          });
        }}
      >
        <textarea
          className={`${inputClassName} min-h-32 resize-y`}
          maxLength={4000}
          onChange={(event) => setBody(event.target.value)}
          placeholder="Leave a short note on the post."
          required
          value={body}
        />

        {message ? (
          <div className="rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-[#dbe4ff] text-sm">{message}</div>
        ) : null}

        <button
          className="rounded-[18px] bg-[#9db6ff] px-4 py-3 font-mono text-[#09111d] text-[11px] uppercase tracking-[0.24em] transition hover:bg-[#b8cbff] disabled:cursor-not-allowed disabled:bg-[#556888] disabled:text-[#d4def8]"
          disabled={createComment.isPending}
          type="submit"
        >
          {createComment.isPending ? "Posting..." : "Post comment"}
        </button>
      </form>
    </section>
  );
};