import type { FC } from 'react';

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

import { User } from 'src/types/user';

import { RegularChatAvatar } from 'src/components/dashboard/chat/ChatAvatar';

export type PlaybackRateProps = {
  sender: User;
  hasBeenPlayed: boolean;
  playbackRate: number;
  handleRateChange: () => void;
};

const PlaybackRate: FC<PlaybackRateProps> = props => {
  const { sender, hasBeenPlayed, playbackRate, handleRateChange } = props;

  return (
    <Box
      sx={{
        display: 'flex',
        width: '100%',
        height: '100%',
        justifyContent: 'flex-end',
        alignItems: 'center',
        mr: 1,
        ml: 1,
      }}
    >
      {!hasBeenPlayed && (
        <RegularChatAvatar
          otherUser={sender}
          otherUserId={sender.id}
          size="large"
          withLink={false}
        />
      )}
      {hasBeenPlayed && (
        <Box
          sx={{
            width: '50px',
            height: '50px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Box
            sx={{
              width: '48px',
              height: '23px',
              px: '5px',
              py: '2px',
              backgroundColor: '#54656f80',
              borderTopLeftRadius: '9999px',
              borderBottomLeftRadius: '9999px',
              borderTopRightRadius: '9999px',
              borderBottomRightRadius: '9999px',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              cursor: 'pointer',
            }}
            onClick={handleRateChange}
          >
            <Typography
              sx={{
                color: '#ffffff',
                fontWeight: 500,
                fontSize: '14px',
              }}
            >
              {playbackRate}
            </Typography>
          </Box>
        </Box>
      )}
    </Box>
  );
};

export default PlaybackRate;
