import { useState, useEffect } from "react";
import { createMakeRequest } from "../api";
import { TicketMessage, GetMessagesRequest, GetMessagesResponse } from "../model";
import { devlog } from "../utils";


export function useTicketMessages({ makeRequest, url, messageApiPage, messagesPerPage, ticketId, onNewMessages, onError, isUnauth = false }: {
    makeRequest: ReturnType<typeof createMakeRequest>;
    url: string;
    ticketId: string | undefined;
    messagesPerPage: number;
    messageApiPage: number;
    onNewMessages: (messages: TicketMessage[]) => void;
    onError: (error: Error) => void;
    isUnauth?: boolean;
}) {
    const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle");

    useEffect(function fetchTicketMessages() {
        if (!ticketId) return;

        const controller = new AbortController();

        setFetchState("fetching");
        makeRequest<GetMessagesRequest, GetMessagesResponse>({
            url,
            method: "POST",
            useToken: !isUnauth,
            body: {
                amt: messagesPerPage,
                page: messageApiPage,
                ticket: ticketId,
            },
            signal: controller.signal,
            withCredentials: isUnauth,
        }).then(result => {
            devlog("GetMessagesResponse", result);
            if (result?.length > 0) {
                onNewMessages(result);
                setFetchState("idle");
            } else setFetchState("all fetched");
        }).catch(error => {
            devlog("Error fetching messages", error);
            onError(error);
        });

        return () => controller.abort();
    }, [isUnauth, makeRequest, messageApiPage, messagesPerPage, onError, onNewMessages, ticketId, url]);

    return fetchState;
}