import type { FC } from 'react';

import { useTranslation } from 'react-i18next';

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

import Button from '@material-hu/components/design-system/Buttons/Button';

export type SpeedRatePopoverProps = {
  openRate: boolean;
  id?: string;
  handleCloseRate: () => void;
  anchorRate: any;
  handleChangePlaybackRate: any;
  playbackRate: number;
  idContainer?: string;
};

const SpeedRatePopover: FC<SpeedRatePopoverProps> = props => {
  const {
    openRate,
    id,
    handleCloseRate,
    anchorRate,
    handleChangePlaybackRate,
    playbackRate,
    idContainer,
  } = props;

  const { t } = useTranslation('attachments');

  const container = idContainer ? document.getElementById(idContainer) : null;
  return (
    <Popover
      open={openRate}
      id={id}
      onClose={handleCloseRate}
      anchorEl={anchorRate}
      container={container}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'center',
      }}
      transformOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
      }}
      sx={{
        '& .MuiPopover-root': {
          borderRadius: '4px',
        },
        '& .MuiPopover-paper': {
          borderRadius: '4px',
        },
      }}
    >
      <Box sx={{ pb: 1 }}>
        <Typography sx={{ fontSize: '12px', color: '#8e8e8f', py: 1, px: 1.6 }}>
          {t('playback_speed')}
        </Typography>
        {[0.5, 1, 1.5, 2].map(rate => (
          <Button
            key={rate}
            onClick={() => handleChangePlaybackRate(rate)}
            variant="text"
            sx={{
              display: 'block',
              width: '100%',
              borderRadius: 0,
              color: rate === playbackRate ? '#447db2' : '#424142',
              fontWeight: rate === playbackRate ? 500 : 400,
              '&:hover': {
                backgroundColor: '#1264a3',
                color: '#FFFFFF',
                fontWeight: 400,
              },
            }}
          >
            <Typography sx={{ fontSize: '14px' }}>{rate}x</Typography>
          </Button>
        ))}
      </Box>
    </Popover>
  );
};

export default SpeedRatePopover;
