import React from 'react';
import { Box, Slider as MuiSlider, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { RangerSliderBaseProps } from '@/interfaces/RangerSlider';

const RangerSliderStyled = styled(MuiSlider)(({ theme }) => ({
  height: 8,
    color: theme.palette.primary.main,
  '& .MuiSlider-track': {
    border: 'none',
  },
  '& .MuiSlider-thumb': {
    height: 18,
    width: 18,
    backgroundColor: '#FFF',
    border: `2px solid ${theme.palette.primary.main}`,
    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
      boxShadow: 'inherit',
    },
    '&:before': {
      width: '8px',
      height: '8px',
      position: 'absolute',
      display: 'block',
      background: theme.palette.primary.main,
    },
  },
  '& .MuiSlider-valueLabel': {
    fontSize: 12,
    fontWeight: 'normal',
    top: 48,
    position: 'absolute',
    transition: 'none',
    color: theme.palette.primary.main,
    '&:before': {
      bottom: 'inherit',
      top: '-8px',
    },
    '& *': {
      background: 'transparent',
      color: '#FFF',
    },
  },
  '& .MuiSlider-rail': {
    color: '#F0F2F8 ',
    opacity: 1,
    height: 10,
  },
}));

export const RangerSlider = ({
  value,
  defaultValue,
  color = 'primary',
  showValueInline = false,
  min = 0,
  max = 100,
  valueLabelFormat,
  ...props
}: RangerSliderBaseProps) => {
  const [currentValue, setCurrentValue] = React.useState<number | number[]>(
    value ?? defaultValue ?? (Array.isArray(defaultValue) ? [min, max] : min),
  );

  const handleChange = (event: Event, newValue: number | number[]) => {
    setCurrentValue(newValue);
    props.onChange?.(event, newValue, Array.isArray(newValue) ? 1 : 0);
  };

  React.useEffect(() => {
    value !== undefined && setCurrentValue(value);
  }, [value]);

  const formatValue = (val: number | number[]) =>
    Array.isArray(val)
      ? val[0] === val[1]
        ? valueLabelFormat && typeof valueLabelFormat === 'function'
          ? valueLabelFormat(val[0], 0)
          : val[0]
        : `${valueLabelFormat && typeof valueLabelFormat === 'function' ? valueLabelFormat(val[0], 0) : val[0]} - ${
            valueLabelFormat && typeof valueLabelFormat === 'function' ? valueLabelFormat(val[1], 1) : val[1]
          }`
      : valueLabelFormat && typeof valueLabelFormat === 'function'
      ? valueLabelFormat(val, 0)
      : val;

  return (
    <Box sx={{ width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography gutterBottom>{props.label}</Typography>
        {showValueInline && (
          <Typography style={{ display: 'flex', alignItems: 'center', fontSize: 12 }}>
            {formatValue(currentValue)}
          </Typography>
        )}
      </div>
      <RangerSliderStyled
        value={currentValue}
        defaultValue={undefined}
        min={min}
        max={max}
        color={color}
        onChange={handleChange}
        valueLabelFormat={valueLabelFormat}
        {...props}
      />
    </Box>
  );
};