import type { FC } from 'react';

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

export type PlaySliderProps = {
  onSeek: any;
  onSeekMouseDown: () => void;
  onSeekMouseUp: any;
  played: number;
};

const PlaySlider: FC<PlaySliderProps> = props => {
  const { onSeek, onSeekMouseDown, onSeekMouseUp, played } = props;

  return (
    <Slider
      min={0}
      max={100}
      value={played}
      onChange={onSeek}
      onMouseDown={onSeekMouseDown}
      onChangeCommitted={onSeekMouseUp}
      sx={{
        pb: 0,
        display: 'flex',
        flex: '1 1 0',
        '& .MuiSlider-root': {
          height: 4,
          backgroundColor: '#00000099',
        },
        '& .MuiSlider-thumb': {
          height: 12,
          width: 12,
          backgroundColor: '#FFFFFF',
          display: 'none',
          border: 'none',
          '&:focus, &:hover, &$active': {
            boxShadow: 'inherit',
          },
        },
        '& .MuiSlider-track': {
          height: 4,
          borderRadius: 6,
          backgroundColor: '#FFFFFF',
          borderColor: '#FFFFFF',
        },
        '& .MuiSlider-rail': {
          height: 4,
          borderRadius: 4,
          backgroundColor: '#FFFFFF',
        },
        '&:hover': {
          '& .MuiSlider-thumb': {
            display: 'block',
          },
        },
      }}
    />
  );
};

export default PlaySlider;
