import {
  Box,
  Fab,
  FormControl,
  IconButton,
  InputAdornment,
  InputBase,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import { useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";

import CustomButton from "@components/CustomButton";
import SendIcon from "@components/icons/SendIcon";
import Message from "./Message";

import { apiRequestHandler } from "@utils/api/apiRequestHandler";
import { ApiError, TicketMessage } from "@utils/api/types";
import { throttle } from "@utils/decorators";

import { useSnackbar } from "notistack";

export default function SupportChat() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const [messageText, setMessageText] = useState<string>("");
  const [messages, setMessages] = useState<TicketMessage[]>([]);
  const ticketId = useParams().ticketId;
  const { enqueueSnackbar } = useSnackbar();
  const chatBoxRef = useRef<HTMLDivElement>();
  const [isPreventAutoscroll, setIsPreventAutoscroll] = useState<boolean>(false);

  function scrollToBottom() {
    if (!chatBoxRef.current) return;

    chatBoxRef.current.scroll({
      left: 0,
      top: chatBoxRef.current.scrollHeight,
      behavior: "smooth",
    });
  }

  useEffect(function refreshChatScrollTop() {
    if (!chatBoxRef.current) return;

    const chatBox = chatBoxRef.current;
    const scrollHandler = () =>
      setIsPreventAutoscroll(chatBox.scrollTop + chatBox.clientHeight * 2 < chatBox.scrollHeight);

    const throttledScrollHandler = throttle(scrollHandler, 200);
    chatBox.addEventListener("scroll", throttledScrollHandler);

    return () => {
      chatBox.removeEventListener("scroll", throttledScrollHandler);
    };
  }, []);

  // TODO При подписке на SSE сервер уже отправляет все сообщения тикета
  useEffect(
    function getMessages() {
      if (!ticketId) return;

      const abortController = new AbortController();
      apiRequestHandler
        .getMessages(
          {
            amt: 100,
            page: 0,
            srch: "",
            ticket: ticketId,
          },
          abortController.signal
        )
        .then((result) => {
          if (result instanceof ApiError) {
            enqueueSnackbar(`Api error: ${result.message}`);
          } else if (result instanceof Error) {
            enqueueSnackbar(`Error: ${result.message}`);
          } else {
            setMessages(result);
          }
        });

      return () => {
        abortController.abort();
      };
    },
    [enqueueSnackbar, ticketId]
  );

  useEffect(
    function scrollOnMessage() {
      if (!chatBoxRef.current) return;

      if (!isPreventAutoscroll) scrollToBottom();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    },
    [messages]
  );

  useEffect(
    function subscribeToMessages() {
      if (!ticketId) return;
      const unsubscribe = apiRequestHandler.subscribeToTicket({
        ticketId,
        onMessage(event) {
          // console.log("SSE received:", event.data);
          try {
            const newMessage = JSON.parse(event.data) as TicketMessage;
            setMessages((prev) =>
              prev.findIndex((message) => message.id === newMessage.id) === -1 ? [...prev.slice(), newMessage] : prev
            );
          } catch (error) {
            console.log("SSE is not JSON", error);
          }
        },
        onError(event) {
          console.log("SSE Error:", event);
        },
      });

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

  async function handleSendMessage() {
    if (!ticketId) return;

    const result = await apiRequestHandler.sendTicketMessage({
      ticket: ticketId,
      message: messageText,
      lang: "ru",
      files: [],
    });
    if (result instanceof ApiError) {
      enqueueSnackbar(`Api error: ${result.message}`);
    } else if (result instanceof Error) {
      enqueueSnackbar(`Error: ${result.message}`);
    } else {
      setMessageText("");
    }
  }

  return (
    <Box
      sx={{
        backgroundColor: upMd ? "white" : undefined,
        display: "flex",
        flexGrow: 1,
        maxHeight: upMd ? "443px" : undefined,
        borderRadius: "12px",
        p: upMd ? "20px" : undefined,
        gap: "40px",
        boxShadow: upMd
          ? `0px 100px 309px rgba(210, 208, 225, 0.24), 
                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 
                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
          : undefined,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "start",
          flexDirection: "column",
          flexGrow: 1,
        }}
      >
        <Typography variant={upMd ? "h5" : "body2"} mb={"4px"}>
          Заголовок
        </Typography>
        <Typography
          sx={{
            fontWeight: 400,
            fontSize: "14px",
            lineHeight: "17px",
            color: theme.palette.grey2.main,
            mb: upMd ? "9px" : "20px",
          }}
        >
          Создан: 15.09.22 08:39
        </Typography>
        <Box
          sx={{
            backgroundColor: "#ECECF3",
            border: `1px solid ${theme.palette.grey2.main}`,
            borderRadius: "10px",
            overflow: "hidden",
            width: "100%",
            minHeight: "345px",
            display: "flex",
            flexGrow: 1,
            flexDirection: "column",
          }}
        >
          <Box
            sx={{
              position: "relative",
              width: "100%",
              flexGrow: 1,
              borderBottom: `1px solid ${theme.palette.grey2.main}`,
              height: "200px",
            }}
          >
            {isPreventAutoscroll && (
              <Fab
                size="small"
                onClick={scrollToBottom}
                sx={{
                  position: "absolute",
                  left: "10px",
                  bottom: "10px",
                }}
              >
                <ArrowDownwardIcon />
              </Fab>
            )}
            <Box
              ref={chatBoxRef}
              sx={{
                display: "flex",
                width: "100%",
                flexDirection: "column",
                gap: upMd ? "20px" : "16px",
                px: upMd ? "20px" : "5px",
                py: upMd ? "20px" : "13px",
                overflowY: "auto",
                height: "100%",
              }}
            >
              {messages.map((message) => (
                <Message
                  key={message.id}
                  text={message.message}
                  time={new Date(message.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                  isSelf={true}
                />
              ))}
            </Box>
          </Box>
          <FormControl>
            <InputBase
              value={messageText}
              fullWidth
              placeholder="Текст обращения"
              id="message"
              multiline
              sx={{
                width: "100%",
                p: 0,
              }}
              inputProps={{
                sx: {
                  fontWeight: 400,
                  fontSize: "16px",
                  lineHeight: "19px",
                  pt: upMd ? "13px" : "28px",
                  pb: upMd ? "13px" : "24px",
                  px: "19px",
                  maxHeight: "calc(19px * 5)",
                },
              }}
              onChange={(e) => setMessageText(e.target.value)}
              endAdornment={
                !upMd && (
                  <InputAdornment position="end">
                    <IconButton
                      onClick={handleSendMessage}
                      sx={{
                        height: "45px",
                        width: "45px",
                        mr: "13px",
                        p: 0,
                      }}
                    >
                      <SendIcon />
                    </IconButton>
                  </InputAdornment>
                )
              }
            />
          </FormControl>
        </Box>
      </Box>
      {upMd && (
        <Box sx={{ alignSelf: "end" }}>
          <CustomButton
            onClick={handleSendMessage}
            variant="contained"
            sx={{
              backgroundColor: theme.palette.brightPurple.main,
            }}
          >
            Отправить
          </CustomButton>
        </Box>
      )}
    </Box>
  );
}