import { Box, useMediaQuery, useTheme } from "@mui/material";
import { useEffect } from "react";
import Chat from "./Chat/Chat";
import Collapse from "./Collapse";
import TicketList from "./TicketList/TicketList";
import { getTickets, subscribeToAllTickets } from "@root/api/tickets";
import { GetTicketsRequest, Ticket } from "@root/model/ticket";
import { clearTickets, setTicketsFetchState, updateTickets, useTicketStore } from "@root/stores/tickets";
import { enqueueSnackbar } from "notistack";
import {clearMessageState } from "@root/stores/messages";
import { authStore } from "@root/stores/auth";


export default function Support() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const ticketsPerPage = useTicketStore(state => state.ticketsPerPage);
    const ticketApiPage = useTicketStore(state => state.apiPage);
    const { token } = authStore();

    useEffect(function fetchTickets() {
        const getTicketsBody: GetTicketsRequest = {
            amt: ticketsPerPage,
            page: ticketApiPage,
            status: "open",
        };
        const controller = new AbortController();

        setTicketsFetchState("fetching");
        getTickets({
            body: getTicketsBody,
            signal: controller.signal,
        }).then(result => {
            console.log("GetTicketsResponse", result);
            if (result.data) {
                updateTickets(result.data);
                setTicketsFetchState("idle");
            } else setTicketsFetchState("all fetched");
        }).catch(error => {
            console.log("Error fetching tickets", error);
            enqueueSnackbar(error.message);
        });

        return () => controller.abort();
    }, [ticketApiPage, ticketsPerPage]);

    useEffect(function subscribeToTickets() {
        if (!token) return;

        const unsubscribe = subscribeToAllTickets({
            accessToken: token,
            onMessage(event) {
                try {
                    const newTicket = JSON.parse(event.data) as Ticket;
                    console.log("SSE: parsed newTicket:", newTicket);
                    updateTickets([newTicket]);
                } catch (error) {
                    console.log("SSE: couldn't parse:", event.data);
                    console.log("Error parsing ticket SSE", error);
                }
            },
            onError(event) {
                console.log("SSE Error:", event);
            }
        });

        return () => {
            unsubscribe();
            clearMessageState();
            clearTickets();
        };
    }, []);

    return (
        <Box sx={{
            display: "flex",
            width: "100%",
            flexDirection: upMd ? "row" : "column",
            gap: "12px",
        }}>
            {!upMd &&
                <Collapse headerText="Тикеты">
                    <TicketList />
                </Collapse>
            }
            <Chat />
            {upMd && <TicketList />}
        </Box>
    );
}