import { type FC, useState } from 'react';
import { useTranslation } from 'react-i18next';

import type RecordRTC from 'recordrtc';
import DeleteIcon from '@material-hu/icons/material/DeleteOutline';
import MicIcon from '@material-hu/icons/material/Mic';
import PauseCircleOutlineIcon from '@material-hu/icons/material/PauseCircleOutline';
import SendIcon from '@material-hu/icons/material/Send';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { keyframes, styled } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import useTimerRecordAudio from 'src/hooks/useTimerRecordAudio';
import {
  formatDurationAudio,
  formatMinutes,
  formatSeconds,
} from 'src/utils/record';

const spin = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

type AnimationBulletRecordProps = {
  isRecording: boolean;
};

const AnimationBulletRecord = styled(Box, {
  shouldForwardProp: prop => prop !== 'isRecording',
})<AnimationBulletRecordProps>(({ theme, isRecording }) => ({
  backgroundColor: theme.palette.primary.main,
  width: 10,
  height: 10,
  marginRight: 6,
  borderRadius: '50%',
  animation: `${isRecording ? spin : undefined} 1s infinite ease`,
}));

export type ChatRecordMessageProps = {
  onSendRecordMessage: (any) => void;
  onCloseRecordMessage: () => void;
  recorder: RecordRTC;
};

const MAX_RECORDER_TIME = 5;

const ChatRecordMessage: FC<ChatRecordMessageProps> = props => {
  const { onCloseRecordMessage, onSendRecordMessage, recorder } = props;

  const [isRecording, setIsRecording] = useState<boolean>(true);

  const { t } = useTranslation(['GENERAL', 'CHAT']);

  const handlePauseRecord = () => {
    recorder.pauseRecording();
    setIsRecording(false);
  };

  const timerRecorder = useTimerRecordAudio(isRecording, handlePauseRecord);

  const handleResumeRecord = () => {
    recorder.resumeRecording();
    setIsRecording(true);
  };

  const handleSendRecordMessage = () => {
    const duration = formatDurationAudio(
      timerRecorder.recordingMinutes,
      timerRecorder.recordingSeconds,
    );

    onSendRecordMessage(duration);
  };

  return (
    <Stack
      flexDirection="row"
      alignItems="center"
    >
      <Tooltip title={t('ELIMINATE')}>
        <span>
          <IconButton onClick={onCloseRecordMessage}>
            <DeleteIcon
              fontSize="small"
              color="error"
            />
          </IconButton>
        </span>
      </Tooltip>
      <AnimationBulletRecord isRecording={isRecording} />
      <Typography
        color="textSecondary"
        variant="subtitle2"
      >
        {t('CHAT:TIMER_RECORDING', {
          minutes: formatMinutes(timerRecorder.recordingMinutes),
          seconds: formatSeconds(timerRecorder.recordingSeconds),
        })}
      </Typography>
      {isRecording && (
        <Tooltip title={t('CHAT:PAUSE')}>
          <span>
            <IconButton
              aria-label={t('CHAT:PAUSE')}
              color="primary"
              onClick={handlePauseRecord}
            >
              <PauseCircleOutlineIcon fontSize="small" />
            </IconButton>
          </span>
        </Tooltip>
      )}
      {!isRecording && (
        <Tooltip title={t('CHAT:RESUME')}>
          <span>
            <IconButton
              aria-label={t('CHAT:RESUME')}
              color="primary"
              disabled={timerRecorder.recordingMinutes === MAX_RECORDER_TIME}
              onClick={handleResumeRecord}
            >
              <MicIcon fontSize="small" />
            </IconButton>
          </span>
        </Tooltip>
      )}
      <Tooltip title={t('SEND')}>
        <span>
          <IconButton
            aria-label={t('SEND')}
            color="primary"
            onClick={handleSendRecordMessage}
          >
            <SendIcon fontSize="small" />
          </IconButton>
        </span>
      </Tooltip>
    </Stack>
  );
};

export default ChatRecordMessage;