import React from 'react';
import { as, toRem } from 'folds';
import { MatrixEvent } from 'matrix-js-sdk';
import { AttachmentBox, MessageBrokenContent } from '../../../components/message';
import { ImageContent } from './ImageContent';
import { scaleYDimension } from '../../../utils/common';
import { IImageContent } from '../../../../types/matrix/common';

type StickerContentProps = {
  mEvent: MatrixEvent;
  autoPlay: boolean;
};
export const StickerContent = as<'div', StickerContentProps>(({ mEvent, autoPlay, ...props }, ref) => {
  const content = mEvent.getContent<IImageContent>();
  const imgInfo = content?.info;
  const mxcUrl = content.file?.url ?? content.url;
  if (!imgInfo || typeof imgInfo.mimetype !== 'string' || typeof mxcUrl !== 'string') {
    return <MessageBrokenContent />;
  }
  const height = scaleYDimension(imgInfo.w || 152, 152, imgInfo.h || 152);

  return (
    <AttachmentBox
      style={{
        height: toRem(height < 48 ? 48 : height),
        width: toRem(152),
      }}
      {...props}
      ref={ref}
    >
      <ImageContent
        autoPlay={autoPlay}
        body={content.body || 'Image'}
        info={imgInfo}
        mimeType={imgInfo.mimetype}
        url={mxcUrl}
        encInfo={content.file}
      />
    </AttachmentBox>
  );
});