import * as React from 'react';
import { FC } from 'react';
import { style } from 'typestyle';
import Mute from '../../../Icons/MuteUnmute/Mute';
import Unmute from '../../../Icons/MuteUnmute/Unmute';
import { onKeyDownEventCallback } from '../../../../utils/onKeyDown';
import { pillActiveBackgroundColor, pillBackgroundColor } from '../../../consts';

interface MuteButtonProps {
  isMuted: boolean;
  toggleMute: () => void;
}

const MuteButton: FC<MuteButtonProps> = ({ isMuted, toggleMute }) => (
  <button
    type='button'
    className={styles.button}
    onClick={toggleMute}
    onKeyDown={(e) => onKeyDownEventCallback(e, toggleMute)}
    tabIndex={0}
    aria-label={isMuted ? 'Unmute' : 'Mute'}
  >
    {isMuted ? <Mute color='white' size={24} /> : <Unmute color='white' size={24} />}
  </button>
);

export default MuteButton;

const styles = {
  button: style({
    backgroundColor: pillBackgroundColor,
    backdropFilter: 'blur(3px)',
    '-webkit-backdrop-filter': 'blur(3px)',
    border: 'none',
    cursor: 'pointer',
    outline: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '5px',
    borderRadius: '50%',
    height: '40px',
    width: '40px',
    $nest: {
      '&:active': {
        backgroundColor: pillActiveBackgroundColor,
      },
      '&:focus-visible': {
        outline: '2px solid white',
        outlineOffset: '2px',
      },
    },
  }),
};
