"use client";
import { FC, useRef } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Textarea } from "../forms/Inputs";
import { toast } from "react-toastify";
import { postData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import ActionButton from "../action-button";
import Spinner from "../spinner";
import getData from "@/utils/fetch";
import { format } from "date-fns";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import TicketMessageThread from "./ticket-message-thread";

interface Props {
    ticketId: string;
}

const replySchema = z.object({
    message: z.string().min(1, "Message is required"),
});

type TSreplySchema = z.infer<typeof replySchema>;

const TicketReplyThread: FC<Props> = ({ ticketId }) => {
    const queryClient = useQueryClient();
    const inputRef = useRef<HTMLInputElement>(null);

    const replyForm = useForm<TSreplySchema>({
        resolver: zodResolver(replySchema),
        mode: "onChange",
        defaultValues: {
            message: "",
        },
    });

    const {
        handleSubmit,
        reset,
        formState: { errors },
    } = replyForm;

    const getMessages = async () => {
        const response = await getData(`/api/v1/tickets/${ticketId}/messages`);
        return response?.data;
    };

    const {
        data: messages,
    } = useQuery({
        queryKey: ["ticket-messages", ticketId],
        queryFn: () => getMessages(),
        refetchOnWindowFocus: false,
        refetchInterval: 2000,
    });

    const { mutate: submitReply, isPending } = useMutation({
        mutationFn: async (formData: TSreplySchema) => {
            const data = await postData(
                `/api/v1/tickets/${ticketId}/messages`,
                formData
            );
            return data;
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ["ticket-messages", ticketId] });
            toast.success("Reply sent successfully!");
            reset();
        },
        onError: (error: any) => {
            toast.error(useParseError(error));
        },
    });

    const onSubmit = (data: TSreplySchema) => {
        submitReply(data);
    };

    const onError = (data: any) => {
        console.log(data);
    };

    // if (isLoading || isFetching) {
    //     return (
    //         <div className="relative">
    //             <div className="grid fixed left-2/4 top-1/2 z-50">
    //                 <Spinner size="xl" color="purple" />
    //             </div>
    //         </div>
    //     );
    // }

    return (
        <div className="">
            <div className="h-40">
                <FormProvider {...replyForm}>
                    <form onSubmit={handleSubmit(onSubmit, onError)} className="mt-1">
                        <div className="mb-1">
                            <Textarea
                                name="message"
                                labelText="Reply"
                                placeholder="Type your reply here..."
                                errors={errors}
                                rows={3}
                            />
                        </div>
                        <div className="flex justify-end">
                            <ActionButton
                                onClick={() => inputRef.current?.click()}
                                type="submit"
                                title="Send Reply"
                                isLoading={isPending}
                            />
                        </div>
                        <input className="opacity-0" type="submit" ref={inputRef} />
                    </form>
                </FormProvider>
            </div>
            {messages && <TicketMessageThread messages={messages} />}
        </div>
    );
};

export default TicketReplyThread;