import { type FC, useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { useParams } from 'react-router';

import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import { logEvent } from 'src/config/amplitude';
import { EVENTS_SOCKETS } from 'src/constants/sockets';
import { useSocket } from 'src/contexts/SocketContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import {
  FolderList,
  PendingList,
} from 'src/pages/dashboard/documents/components/documents';
import {
  dropFolderListData,
  dropPendingDocumentListData,
  pushFolderListData,
  pushPendingDocumentListData,
  setFolderListData,
  setPendingDocumentListData,
  updateDocuments,
} from 'src/pages/dashboard/documents/queries';
import { EventName } from 'src/types/amplitude';
import { type Document, type Folder, VisitedFrom } from 'src/types/documents';
import { isPendingDocument } from 'src/utils/documents';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import LaComerDocuments, { useLaComerCheck } from './LaComerDocuments';

export const Documents: FC = () => {
  const { t } = useLokaliseTranslation('documents');
  const socket = useSocket();
  const isLacomer = useLaComerCheck();
  const { source } = useParams();
  const HuGoThemeProvider = useHuGoTheme();

  if (isLacomer) {
    return <LaComerDocuments />;
  }

  useEffect(() => {
    const deleteFolder = (data: { id: number }) => {
      dropFolderListData(data.id);
    };

    const updateFolder = (folder: Folder) => {
      setFolderListData(folder.id, folder);
    };

    socket.listenEvent(EVENTS_SOCKETS.DOCUMENT_FOLDER_UPDATED, updateFolder);

    socket.listenEvent(EVENTS_SOCKETS.DOCUMENT_FOLDER_DELETED, deleteFolder);

    socket.listenEvent(
      EVENTS_SOCKETS.DOCUMENT_FOLDER_CREATED,
      pushFolderListData,
    );

    return () => {
      socket.closeEvent(EVENTS_SOCKETS.DOCUMENT_FOLDER_UPDATED, updateFolder);

      socket.closeEvent(EVENTS_SOCKETS.DOCUMENT_FOLDER_DELETED, deleteFolder);

      socket.closeEvent(
        EVENTS_SOCKETS.DOCUMENT_FOLDER_CREATED,
        pushFolderListData,
      );
    };
  }, [socket]);

  useEffect(() => {
    const deletePendingDocument = (data: { id: number }) => {
      dropPendingDocumentListData(data.id);
      updateDocuments();
    };

    const updatePendingDocument = (document: Document) => {
      if (isPendingDocument(document)) {
        setPendingDocumentListData(document.id, document);
      } else {
        dropPendingDocumentListData(document.id);
      }
      updateDocuments();
    };

    const addPendingDocument = (document: Document) => {
      if (isPendingDocument(document)) {
        pushPendingDocumentListData();
      }
      updateDocuments();
    };

    socket.listenEvent(EVENTS_SOCKETS.DOCUMENT_UPDATED, updatePendingDocument);

    socket.listenEvent(EVENTS_SOCKETS.DOCUMENT_DELETED, deletePendingDocument);

    return () => {
      socket.closeEvent(
        EVENTS_SOCKETS.DOCUMENT_FOLDER_UPDATED,
        updatePendingDocument,
      );

      socket.closeEvent(
        EVENTS_SOCKETS.DOCUMENT_FOLDER_DELETED,
        deletePendingDocument,
      );

      socket.closeEvent(
        EVENTS_SOCKETS.DOCUMENT_FOLDER_CREATED,
        addPendingDocument,
      );
      socket.closeEvent(EVENTS_SOCKETS.DOCUMENT_UPDATED, updatePendingDocument);
      socket.closeEvent(EVENTS_SOCKETS.DOCUMENT_DELETED, deletePendingDocument);
    };
  }, [socket]);

  useEffect(() => {
    logEvent(EventName.DOCUMENTS_SECTION_VISITED, {
      source: source ?? VisitedFrom.NAVBAR,
    });
  }, [source]);

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('MY_DOCUMENTS'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          height: '100%',
          overflow: 'auto',
        }}
      >
        <Container
          maxWidth="lg"
          sx={{
            mt: 2,
          }}
        >
          <HuTitle
            title={t('MY_DOCUMENTS')}
            variant="L"
          />
          <Stack sx={{ gap: 2, py: 2 }}>
            <PendingList />
            <FolderList />
          </Stack>
        </Container>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Documents;