import React, { ComponentProps, forwardRef } from 'react';
import { Slider as MuiSlider, sliderClasses } from '@mui/material';

import { SHAPE_ROUNDED, SHAPE_SQUARE } from '@/mui/constants';

import type { ShapeProp } from '@/mui/types';

type Props = ComponentProps<typeof MuiSlider> & {
  shape?: ShapeProp;
  readOnly?: boolean;
};

const Slider = forwardRef<HTMLSpanElement, Props>(({ shape, readOnly, sx, ...rest }, ref) => (
  <MuiSlider
    ref={ref}
    {...rest}
    sx={{
      ...(readOnly && {
        pointerEvents: 'none',
      }),
      ...(shape === SHAPE_SQUARE && {
        borderRadius: 0,
        [`& .${sliderClasses.thumb}`]: {
          borderRadius: 0,
        },
      }),
      ...(shape === SHAPE_ROUNDED && {
        borderRadius: (theme) => theme.shape.borderRadius,
        [`& .${sliderClasses.thumb}`]: {
          borderRadius: (theme) => theme.shape.borderRadius,
        },
      }),
      ...sx,
    }}
  />
));

Slider.displayName = 'Slider';

export default Slider;
