import { type FC } from 'react';

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

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

import { FileTypes } from 'src/types/attachments';
import { type Comment as CommentType } from 'src/types/comments';
import { getFullName, getInitials } from 'src/utils/userUtils';

import { MediaCarousel } from 'src/components/attachment';
import Gif from 'src/components/attachment/Gif';
import PostText from 'src/components/post/PostText';
import TimeDistance from 'src/components/time/TimeDistance';

export type CommentUsersProps = {
  comment: CommentType;
  postId?: number;
  maxAttachmentsBytes?: number;
};

const MAX_CHARACTERS_LIMIT = 150;
const MAX_NEW_LINES_LIMIT = 2;

const CommentUsers: FC<CommentUsersProps> = props => {
  const { comment } = props;

  const { body, bodyAttributes, attachments, user, createdAt, updatedAt } =
    comment;

  const mediaList = attachments?.filter(
    attachment =>
      FileTypes.VIDEO === attachment.type ||
      FileTypes.IMAGE === attachment.type,
  );

  const gif = attachments?.find(
    attachment => attachment.type === FileTypes.GIF,
  );

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 1,
      }}
    >
      <HuAvatar
        src={user.profilePicture || ''}
        text={getInitials(getFullName(user))}
      />
      <Stack sx={{ width: mediaList?.length ? '100%' : 'auto', gap: 0.5 }}>
        <Stack
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
            borderRadius: 2,
            flexGrow: 1,
            px: 2,
            py: 1,
          }}
        >
          <Typography
            variant="globalXS"
            color="new.text.neutral.default"
            fontWeight="fontWeightSemiBold"
          >
            {getFullName(user)}
          </Typography>
          {body && (
            <PostText
              body={body}
              bodyAttributes={bodyAttributes}
              maxCharacters={MAX_CHARACTERS_LIMIT}
              maxNewLines={MAX_NEW_LINES_LIMIT}
            />
          )}
          {gif && (
            <Stack sx={{ mt: 2 }}>
              <Gif media={gif} />
            </Stack>
          )}
          {mediaList?.length > 0 && (
            <Stack sx={{ mt: 2 }}>
              <MediaCarousel mediaList={mediaList} />
            </Stack>
          )}
        </Stack>
        <TimeDistance
          date={new Date(updatedAt || createdAt)}
          showIcon={false}
          isComment
          typographySx={{
            variant: 'globalXS',
            fontWeight: 'regular',
            ml: 0.5,
          }}
        />
      </Stack>
    </Stack>
  );
};

export default CommentUsers;