import type { SwitchProps, Theme } from '@mui/material';
import { switchClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

const sizes = {
  xSmall: {
    width: 34,
    height: 24,
    thumbSize: 10,
    trackWidth: 26,
    trackHeight: 16,
  },
  small: {
    width: 44,
    height: 30,
    thumbSize: 14,
    trackWidth: 34,
    trackHeight: 20,
  },
  medium: {
    width: 52,
    height: 36,
    thumbSize: 16,
    trackWidth: 40,
    trackHeight: 24,
  },
  large: {
    width: 62,
    height: 42,
    thumbSize: 20,
    trackWidth: 48,
    trackHeight: 28,
  },
};
export default function MuiSwitch(theme: Theme): Components['MuiSwitch'] {
  return {
    defaultProps: {
      color: 'primary',
    },
    styleOverrides: {
      root: {
        padding: 4,
        width: 'auto',
        height: 'auto',

        ...(theme.direction === 'rtl' && {
          justifyContent: 'flex-end',
        }),
      },
      switchBase: {
        padding: 0,
        top: 0,
        left: 0,
      },
      track: {
        borderRadius: '100vh',
        width: 46,
        height: 28,
      },
      thumb: {
        boxShadow: theme.shadows[1],
        width: 20,
        height: 20,
        margin: 0,
      },
      colorNeutral: {
        [`&.${switchClasses.track}`]: {
          backgroundColor: theme.palette.shades[300],
        },

        [`&.${switchClasses.checked}`]: {
          color: theme.palette.shades[900],

          [`&  + .${switchClasses.track}`]: {
            backgroundColor: theme.palette.shades[500],
            opacity: 1,
          },
        },
      },
    },
    variants: [
      ...Object.entries(sizes).map(([key, { thumbSize, width, height, trackWidth, trackHeight }]) => ({
        props: { size: key } as Partial<SwitchProps>,
        style: {
          padding: 0,
          width,
          height,
          [`& .${switchClasses.switchBase}`]: {
            top: 0,
            left: 0,
            width: height,
            height,
            transform: 'translate(0px)',

            ...(theme.direction === 'rtl' && {
              transform: `translate(${width - height}px)`,
            }),

            [`&.${switchClasses.checked}`]: {
              transform: `translate(${width - height}px)`,

              ...(theme.direction === 'rtl' && {
                transform: 'translate(0px)',
              }),
            },
          },

          [`& .${switchClasses.track}`]: {
            position: 'relative',
            left: (width - trackWidth) / 2,
            top: (height - trackHeight) / 2,
            width: trackWidth,
            height: trackHeight,
          },

          [`& .${switchClasses.thumb}`]: {
            width: thumbSize,
            height: thumbSize,
          },
        },
      })),
    ],
  };
}
