import { useEffect, useMemo } from 'react';
import { useNavigate, useParams, useMatch } from 'react-router-dom';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useTimeInScreen from 'src/hooks/useTimeInScreen';
import { EventName } from 'src/types/amplitude';
import { LibraryStatus } from 'src/types/libraries';
import { useLokaliseTranslation } from 'src/utils/i18n';

import NoResults from 'src/components/list/NoResults';

import LibraryDetail from './components/LibraryDetail';
import LibraryForm from './components/LibraryForm';
import useGetLibrary from './hooks/useGetLibrary';
import useGetLibraryTree from './hooks/useGetLibraryTree';
import { librariesRoutes } from './routes';

const Library = () => {
  const { id } = useParams();
  const { t } = useLokaliseTranslation('apps');
  const navigate = useNavigate();
  const HuGoThemeProvider = useHuGoTheme();
  const isEdit = !!useMatch(librariesRoutes.edit());

  const {
    data: library,
    isLoading: isLoadingLibrary,
    isSuccess: isSuccessLibrary,
  } = useGetLibrary(id!);

  const { data: links = [], isLoading: isLoadingLinks } = useGetLibraryTree(
    id!,
  );

  const title = library?.title || t('title_view_knowledge_libraries');
  const parentId = library?.parentId;

  useEffect(() => {
    if (isEdit && isSuccessLibrary && !library?.isEditor) {
      navigate(librariesRoutes.library(id), { replace: true });
    }
  }, [isEdit, isSuccessLibrary, library?.isEditor]);

  const eventProperties = useMemo(
    () => ({
      widgetId: id,
      parentId,
      name: title,
    }),
    [id, parentId, title],
  );

  useTimeInScreen(EventName.WIDGET_LIBRARY_VIEW, eventProperties);

  const isVisible = library?.status === LibraryStatus.ENABLED;
  const showLoading = isLoadingLibrary;
  const showNoResults = !showLoading && !isVisible;
  const showDetail = !showLoading && isVisible && !isEdit;
  const showEdit = !showLoading && isVisible && isEdit;

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          minHeight: '100%',
          width: '100%',
          pb: 8,
          overflow: 'auto',
          gap: 3,
        }}
      >
        {showLoading && (
          <Stack
            sx={{
              width: '100%',
              height: '100%',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <CircularProgress />
          </Stack>
        )}
        {showNoResults && <NoResults label={t('general:not_found')} />}
        {showDetail && (
          <LibraryDetail
            library={library}
            links={links}
            linksLoading={isLoadingLinks}
          />
        )}
        {showEdit && (
          <LibraryForm
            library={library}
            links={links}
            linksLoading={isLoadingLinks}
          />
        )}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Library;