import { Link as RouterLink } from 'react-router-dom';

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

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

import { useAuth } from 'src/contexts/JWTContext';
import usePermissions from 'src/hooks/usePermissions';
import { getAcknowledgementReactionUsers } from 'src/pages/dashboard/acknowledgements/services';
import { type Acknowledgement } from 'src/pages/dashboard/acknowledgements/types';
import { DEFAULT_EMOJI } from 'src/types/feed';
import { UserPermissions } from 'src/utils/permissions';

import { MediaCarousel } from 'src/components/attachment';
import { ReactionsList } from 'src/components/dashboard/reactions';
import ShowMoreText from 'src/components/text/ShowMoreText';

import useReactionsMutation from '../../hooks/useReactionsMutations';
import { acknowledgementsRoutes } from '../../routes';
import { AcknowledgementCardSkeleton } from '../AcknowledgementCardSkeleton';

import AcknowledgementCardHeader from './AcknowledgementCardHeader';
import AcknowledgementComments from './AcknowledgementComments';
import AcknowledgementCover from './AcknowledgementCover';
import AcknowledgementProfiles from './AcknowledgementProfiles';

export type AcknowledgementCardProps = {
  acknowledgement?: Acknowledgement;
  showComments?: boolean;
  isDetailPage?: boolean;
  isLoading?: boolean;
};

const AcknowledgementCard = ({
  acknowledgement,
  isDetailPage = false,
  isLoading = false,
}: AcknowledgementCardProps) => {
  const { instance } = useAuth();
  const { hasAll: canReactContent } = usePermissions([
    UserPermissions.CAN_REACT_CONTENT,
  ]);

  const { handleAddReaction, handleRemoveReaction } = useReactionsMutation({
    id: acknowledgement?.id ?? 0,
    reactions: acknowledgement?.reactions ?? [],
  });

  if (isLoading || !acknowledgement) return <AcknowledgementCardSkeleton />;

  const {
    id,
    body,
    acknowledgeds,
    reactions,
    category,
    attachments,
    commentCount,
    lastComments,
  } = acknowledgement;

  const allowComments = !!instance?.acknowledgmentsCanBeCommented;

  const getReactionUsers = (emoji: string, params?: { timestamp?: string }) => {
    return getAcknowledgementReactionUsers(id, emoji, params?.timestamp);
  };

  return (
    <CardContainer
      fullWidth
      padding={0}
      sx={{ pb: 2 }}
    >
      <AcknowledgementCardHeader acknowledgement={acknowledgement} />
      <Link
        component={RouterLink}
        to={acknowledgementsRoutes.detail(id)}
      >
        <AcknowledgementCover category={category} />
      </Link>
      <Stack
        id="acknowledgement-card"
        sx={{
          pb: 2,
          gap: 3,
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Stack sx={{ width: '100%', px: 2 }}>
          <AcknowledgementProfiles
            acknowledgeds={acknowledgeds}
            category={category}
          />
          <ShowMoreText
            color="inherit"
            variant="globalM"
            text={body}
            buttonProps={{
              variant: 'tertiary',
              sx: {
                mt: 1.5,
                p: 0,
                minWidth: '0',
                alignSelf: 'flex-end',
                '&:hover': { background: 'transparent' },
              },
            }}
          />
        </Stack>
        {attachments?.length > 0 && (
          <Stack sx={{ width: '100%', my: 1 }}>
            <MediaCarousel
              mediaList={attachments}
              parentContainerId="acknowledgement-card"
              isPost
            />
          </Stack>
        )}
        {canReactContent && (
          <ReactionsList
            id={id}
            reactions={reactions}
            stackProps={{ sx: { alignSelf: 'flex-start', px: 2 } }}
            getReactionUsers={getReactionUsers}
            onAdd={handleAddReaction}
            onRemove={handleRemoveReaction}
            defaultEmoji={DEFAULT_EMOJI}
            withUserList
          />
        )}
      </Stack>
      {allowComments && (
        <AcknowledgementComments
          id={id}
          isDetail={isDetailPage}
          commentCount={commentCount}
          lastComments={lastComments}
        />
      )}
    </CardContainer>
  );
};

export default AcknowledgementCard;