import { type FC } from 'react';

import Slider from '@material-hu/mui/Slider';
import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

type PlayerVideoControllerProps = {
  remainingTime: string;
  playedTime: number | number[];
  handleSeekChange: (event: Event, value: number | number[]) => void;
  elapsedTime: string;
  totalDuration: number;
  visible?: boolean;
};

const PlayerVideoController: FC<PlayerVideoControllerProps> = ({
  remainingTime,
  playedTime,
  handleSeekChange,
  elapsedTime,
  totalDuration,
  visible = true,
}) => {
  const isInfiniteDuration = totalDuration === Infinity;

  if (isInfiniteDuration) return null;
  return (
    <Stack
      onClick={e => e.stopPropagation()}
      sx={{
        position: 'absolute',
        bottom: theme => theme.spacing(1),
        left: '50%',
        transform: 'translateX(-50%)',
        px: 2,
        flexDirection: 'row',
        width: 320,
        gap: 2,
        alignItems: 'center',
        borderRadius: 1,
        backgroundColor: theme => alpha(theme.palette.common.white, 0.5),
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? 'auto' : 'none',
        transition: 'opacity 0.2s ease',
      }}
    >
      <Typography variant="globalXS">{remainingTime}</Typography>
      <Slider
        min={0}
        max={100}
        value={playedTime}
        onChange={handleSeekChange}
        sx={{
          '& .MuiSlider-thumb': {
            display: 'none',
          },
          '& .MuiSlider-track': {
            height: 4,
            borderRadius: 6,
            backgroundColor: theme => theme.palette.new.graphics.brand[500],
            borderColor: theme => theme.palette.new.graphics.brand[500],
          },
          '& .MuiSlider-rail': {
            height: 4,
            borderRadius: 4,
            backgroundColor: theme => theme.palette.new.graphics.brand[500],
          },
        }}
      />
      <Typography variant="globalXS">-{elapsedTime}</Typography>
    </Stack>
  );
};

export default PlayerVideoController;