import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { useAudioControl } from '../../../../hooks/useAudioControl';
import classes from './AudioMessage.module.scss';
import PlayButton from './PlayButton';
import WaveForm from './WaveForm';
import type { MessageInfo, AudioMessagePayload } from 'tuikit-atomicx-react/chat';

interface AudioMessageProps {
  message: MessageInfo;
}

function AudioMessage(props: AudioMessageProps) {
  const { message } = props;
  const payload = message.messagePayload as AudioMessagePayload;
  const { audioURL: url, audioDuration: second } = payload;

  const {
    isPlaying,
    progress,
    play,
    stop,
    setProgress,
  } = useAudioControl({ url: url ?? '' });

  return (
    <View className={cs(classes['audio-message'], {
      [classes['audio-message--self']]: message.isSentBySelf,
      [classes['audio-message--other']]: !message.isSentBySelf,
    })}
    >
      <View className={classes['audio-message__content']}>
        <PlayButton
          isPlaying={isPlaying}
          onClick={isPlaying ? stop : play}
        />
        <WaveForm
          progress={progress}
          onSeek={setProgress}
        />
        <View className={classes['audio-message__duration']}>
          {second}
          s
        </View>
      </View>
    </View>
  );
}

export default AudioMessage;