import { Typography, Box, useTheme, useMediaQuery, IconButton } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useParams } from "react-router-dom";
import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@components/ComplexNavText";
import SupportChat from "./SupportChat";
import CreateTicket from "./CreateTicket";
import TicketList from "./TicketList/TicketList";
import { useCallback } from "react";
import { Ticket } from "@frontend/kitui";
import { updateTickets, setTicketCount, clearTickets, useTicketStore } from "@root/stores/tickets";
import { enqueueSnackbar } from "notistack";
import { useAuthStore } from "@root/stores/auth";
import { useSSESubscription, useTickets } from "@frontend/kitui";


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

    const fetchState = useTickets({
        url: "https://hub.pena.digital/heruvym/getTickets",
        ticketsPerPage,
        ticketApiPage,
        onNewTickets: useCallback(result => {
            if (result.data) updateTickets(result.data);
            setTicketCount(result.count);
        }, []),
        onError: useCallback((error: Error) => {
            enqueueSnackbar(error.message);
        }, [])
    });

    useSSESubscription<Ticket>({
        enabled: Boolean(token),
        url: `https://admin.pena.digital/heruvym/subscribe?Authorization=${token}`,
        onNewData: updateTickets,
        onDisconnect: useCallback(() => {
            clearTickets();
        }, []),
        marker: "ticket"
    });

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                pt: upMd ? "25px" : "20px",
                pb: upMd ? "82px" : "43px",
                height: "100%",
            }}
        >
            {upMd && <ComplexNavText text1="Все тарифы — " text2="Запрос в службу техподдержки" />}
            <Box
                sx={{
                    mt: "20px",
                    mb: "40px",
                    display: "flex",
                    gap: "10px",
                }}
            >
                {!upMd && (
                    <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                        <ArrowBackIcon />
                    </IconButton>
                )}
                <Typography variant="h4">Запрос в службу техподдержки</Typography>
            </Box>
            {ticketId ? (
                <SupportChat />
            ) : (
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        gap: upMd ? "40px" : "60px",
                    }}
                >
                    <CreateTicket />
                    <TicketList fetchState={fetchState} />
                </Box>
            )}
        </SectionWrapper>
    );
}