import {
  Typography,
  Box,
  useTheme,
  useMediaQuery,
  IconButton,
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { Link, useParams } from "react-router-dom";
import SectionWrapper from "@components/SectionWrapper";
import SupportChat from "./SupportChat";
import CreateTicket from "./CreateTicket";
import TicketList from "./TicketList/TicketList";
import { useCallback } from "react";
import { Ticket, getMessageFromFetchError, useToken } from "@frontend/kitui";
import {
  updateTickets,
  setTicketCount,
  clearTickets,
  useTicketStore,
} from "@root/stores/tickets";
import { enqueueSnackbar } from "notistack";
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 = useToken();

  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) => {
      const message = getMessageFromFetchError(error);
      if (message) enqueueSnackbar(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" : "20px",
        height: "calc(100vh - 51px)",
        maxHeight: "calc(100vh - 51px)",
      }}
    >
      <Box
        sx={{
          mt: "20px",
          mb: "40px",
          display: "flex",
          gap: "10px",
        }}
      >
        <Link
          to="/support"
          style={{
            textDecoration: "none",
            display: "flex",
            alignItems: "center",
            columnGap: "10px",
            color: theme.palette.common.black,
          }}
        >
          <IconButton
            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
          >
            <ArrowBackIcon />
          </IconButton>
          <Typography variant="h4">Запрос в службу техподдержки</Typography>
        </Link>
      </Box>
      {ticketId ? (
        <SupportChat />
      ) : (
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: upMd ? "40px" : "60px",
          }}
        >
          <CreateTicket />
          <TicketList fetchState={fetchState} />
        </Box>
      )}
    </SectionWrapper>
  );
}