import { useCallback, memo, useState, useMemo, useEffect } from 'react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import classes from './VideoMessage.module.scss';
import type { MessageInfo, VideoMessagePayload } from 'tuikit-atomicx-react/chat';

interface VideoMessageProps {
  message: MessageInfo;
  isLastMessage?: boolean;
}

const VideoMessage = (props: VideoMessageProps) => {
  const { message, isLastMessage = false } = props;
  const messageContent = message.messagePayload as VideoMessagePayload;

  const [windowResize, setWindowResize] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [naturalSize, setNaturalSize] = useState<{ height: number; aspectRatio: number } | null>(
    messageContent.videoSnapshotWidth && messageContent.videoSnapshotHeight
      ? {
        height: messageContent.videoSnapshotHeight,
        aspectRatio: messageContent.videoSnapshotWidth / messageContent.videoSnapshotHeight,
      }
      : null,
  );

  const isMessageOwner = message.isSentBySelf;

  const onResize = useCallback(() => {
    setWindowResize(true);
  }, []);

  useEffect(() => {
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
    };
  }, [onResize]);

  // calculate final display size
  const displaySize = useMemo(() => {
    const MAX_HEIGHT = 360;
    const DEFAULT_RATIO = 3 / 4;

    if (!naturalSize) {
      return {
        height: MAX_HEIGHT,
        aspectRatio: DEFAULT_RATIO,
      };
    }

    const { aspectRatio } = naturalSize;

    if (aspectRatio > 1) {
      return {
        aspectRatio,
        height: 200,
      };
    }
    return {
      aspectRatio,
      height: MAX_HEIGHT,
    };
  }, [naturalSize]);

  const onVideoLoad = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => {
    const video = e.target as HTMLVideoElement;
    setNaturalSize({
      aspectRatio: video.videoWidth / video.videoHeight,
      height: video.videoHeight,
    });
    setLoaded(true);
  }, []);

  return (
    <View
      className={cs(classes['video-message'], {
        [classes['video-message--last--self']]: isMessageOwner && isLastMessage,
        [classes['video-message--last--other']]: !isMessageOwner && isLastMessage,
        [classes['video-message--loaded']]: loaded,
      })}
      style={{
        minHeight: windowResize ? 'auto' : displaySize.height,
        maxHeight: displaySize.height,
        aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
        width: !loaded ? displaySize.height * displaySize.aspectRatio : undefined,
      }}
    >
      {!loaded && <div className={classes['video-placeholder']} />}
      <video
        className={classes['video-message__video']}
        src={messageContent.videoURL}
        poster={messageContent.videoSnapshotURL}
        controls
        muted
        autoPlay={false}
        onLoadedMetadata={onVideoLoad}
      />
    </View>
  );
};

export default memo(VideoMessage);