import type { FC } from 'react';

import Slider from '@material-hu/mui/Slider';

export type VolumeSliderProps = {
  volume: number;
  muted: boolean;
  onVolumeChange: any;
  onVolumeSeekDown: any;
};

const VolumeSlider: FC<VolumeSliderProps> = props => {
  const { volume, muted, onVolumeChange, onVolumeSeekDown } = props;

  return (
    <Slider
      min={0}
      max={100}
      value={muted ? 0 : volume * 100}
      onChange={onVolumeChange}
      onChangeCommitted={onVolumeSeekDown}
      orientation="vertical"
      sx={{
        height: '76px',
        borderRadius: '4px',
        px: '10px',
        '& .MuiSlider-root': {
          width: 6,
        },
        '& .MuiSlider-thumb': {
          height: 10,
          width: 10,
          backgroundColor: '#FFFFFF',
          border: 'none',
          '&:focus, &:hover, &$active': {
            boxShadow: 'inherit',
          },
        },
        '& .MuiSlider-track': {
          width: 6,
          borderRadius: 4,
          backgroundColor: '#FFFFFF',
          borderColor: '#FFFFFF',
        },
        '& .MuiSlider-rail': {
          width: 6,
          borderRadius: 4,
          backgroundColor: '#FFFFFF',
        },
      }}
    />
  );
};

export default VolumeSlider;
