import type { Theme } from '@mui/material';
import { sliderClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

import { iconSizeLarge, iconSizeMedium, iconSizeSmall, iconSizeXSmall } from '@/mui/components/constants';
import { SIZE_LARGE, SIZE_MEDIUM, SIZE_SMALL, SIZE_X_SMALL } from '@/mui/constants';
import { ALPHA_200 } from '@/mui/constants/opacity';

export default function MuiSlider(theme: Theme): Components['MuiSlider'] {
  return {
    styleOverrides: {
      thumb: {
        width: 20,
        height: 20,

        '&::after': {
          width: 36,
          height: 36,
        },
      },
      thumbSizeSmall: {
        width: 16,
        height: 16,
        '&::after': {
          width: 30,
          height: 30,
        },
      },
      markLabel: {
        fontSize: theme.typography.caption.fontSize,
        // color: theme.palette.text.primary,
      },
      valueLabel: {
        color: theme.palette.info.contrastText,
        backgroundColor: theme.palette.info.light,
        borderRadius: theme.shape.borderRadiusSmall,
      },
      thumbColorNeutral: {
        color: theme.palette.shades[700],
      },
      colorNeutral: {
        color: theme.palette.shades[900],
        [`.${sliderClasses.rail}`]: {
          opacity: ALPHA_200,
        },
      },
      rail: {
        bottom: 0,
      },
    },
    variants: [
      {
        props: {
          size: SIZE_X_SMALL,
          orientation: 'vertical',
        },
        style: {
          width: 2,
          paddingTop: '9px',
          paddingBottom: '9px',

          [`& .${sliderClasses.thumb}`]: {
            width: 10,
            height: 10,

            '&:after': {
              width: iconSizeXSmall,
              height: iconSizeXSmall,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_X_SMALL,
          orientation: 'horizontal',
        },
        style: {
          height: 2,
          paddingTop: 9,
          paddingBottom: 9,

          [` .${sliderClasses.thumb}`]: {
            width: 10,
            height: 10,

            '&:after': {
              width: iconSizeXSmall,
              height: iconSizeXSmall,
            },
            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_SMALL,
          orientation: 'vertical',
        },
        style: {
          width: 2,
          paddingTop: 11,
          paddingBottom: 11,

          [`& .${sliderClasses.thumb}`]: {
            width: 12,
            height: 12,

            '&:after': {
              width: iconSizeSmall,
              height: iconSizeSmall,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_SMALL,
          orientation: 'horizontal',
        },
        style: {
          height: 2,
          paddingTop: 11,
          paddingBottom: 11,

          [`& .${sliderClasses.thumb}`]: {
            width: 12,
            height: 12,

            '&:after': {
              width: iconSizeSmall,
              height: iconSizeSmall,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_MEDIUM,
          orientation: 'vertical',
        },
        style: {
          width: 4,
          paddingTop: 12,
          paddingBottom: 12,

          [`& .${sliderClasses.thumb}`]: {
            width: 13,
            height: 13,

            '&:after': {
              width: iconSizeMedium,
              height: iconSizeMedium,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_MEDIUM,
          orientation: 'horizontal',
        },
        style: {
          height: 4,
          paddingTop: 12,
          paddingBottom: 12,

          [`& .${sliderClasses.thumb}`]: {
            width: 13,
            height: 13,

            '&:after': {
              width: iconSizeMedium,
              height: iconSizeMedium,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_LARGE,
          orientation: 'vertical',
        },
        style: {
          width: 4,
          paddingTop: 14,
          paddingBottom: 14,

          [`& .${sliderClasses.thumb}`]: {
            width: 16,
            height: 16,

            '&:after': {
              width: iconSizeLarge,
              height: iconSizeLarge,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
      {
        props: {
          size: SIZE_LARGE,
          orientation: 'horizontal',
        },
        style: {
          height: 4,
          paddingTop: 14,
          paddingBottom: 14,

          [`& .${sliderClasses.thumb}`]: {
            width: 16,
            height: 16,

            '&:after': {
              width: iconSizeLarge,
              height: iconSizeLarge,
            },

            [`&.${sliderClasses.active}`]: {
              boxShadow: `0px 0px 0px 10px color-mix(in srgb, currentColor ${theme.palette.action.focusOpacity * 100}%, transparent)`,
            },
          },
        },
      },
    ],
  };
}
