import { type FC, useMemo } from 'react';
import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useTimeInScreen from 'src/hooks/useTimeInScreen';
import { profileKeys } from 'src/pages/dashboard/profile/queries';
import { getUserProfile } from 'src/services/users';
import { EventName } from 'src/types/amplitude';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Cover from './components/Cover';
import CoverSkeleton from './components/CoverSkeleton';
import ProfileContent from './components/ProfileContent';
import ProfileContentSkeleton from './components/ProfileContentSkeleton';

const NewProfile: FC = () => {
  const { id } = useParams();
  const { t } = useLokaliseTranslation('profile');

  const eventProperties = useMemo(() => ({ userId: id }), [id]);

  useTimeInScreen(EventName.USER_PROFILE_VIEW, eventProperties);

  const { data: userProfileData, dataUpdatedAt } = useQuery(
    profileKeys.detail(id!),
    () => getUserProfile(id!),
    {
      select: r => r.data,
    },
  );

  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Box
        sx={{
          minHeight: '100%',
          pt: 5,
          pb: 1,
          backgroundColor: ({ palette }) => palette.new.background,
        }}
        key={id?.toString() + dataUpdatedAt?.toString()}
      >
        <Helmet>
          <title>{formatTitle(t('PROFILE'))}</title>
        </Helmet>
        <Container maxWidth="lg">
          <Stack sx={{ gap: 3 }}>
            {!userProfileData && (
              <>
                <CoverSkeleton />
                <ProfileContentSkeleton />
              </>
            )}
            {userProfileData && (
              <>
                <Cover user={userProfileData} />
                <ProfileContent user={userProfileData} />
              </>
            )}
          </Stack>
        </Container>
      </Box>
    </HuGoThemeProvider>
  );
};

export default NewProfile;
