import { inputAdornmentClasses, selectClasses, type SelectProps, svgIconClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';
import { KeyboardArrowDownRounded } from '@mui/icons-material';

import {
  fontSizeLarge,
  fontSizeMedium,
  fontSizeSmall,
  fontSizeXSmall,
  iconSizeLarge,
  iconSizeMedium,
  iconSizeSmall,
  iconSizeXSmall,
  largeSize,
  mediumSize,
  smallSize,
  xSmallSize,
} from '@/mui/components/constants';
import { SIZE_MEDIUM } from '@/mui/constants';

const fontSizes = {
  xSmall: fontSizeXSmall,
  small: fontSizeSmall,
  medium: fontSizeMedium,
  large: fontSizeLarge,
};

const sizes = {
  xSmall: xSmallSize,
  small: smallSize,
  medium: mediumSize,
  large: largeSize,
};

const iconSizes = {
  xSmall: iconSizeXSmall,
  small: iconSizeSmall,
  medium: iconSizeMedium,
  large: iconSizeLarge,
};

export default function MuiSelect(): Components['MuiSelect'] {
  const variants = Object.keys(fontSizes).map((size) => {
    const fontSize = fontSizes[size as keyof typeof fontSizes];
    const inputSize = sizes[size as keyof typeof sizes];
    const iconSize = iconSizes[size as keyof typeof iconSizes];

    return {
      props: { size } as Partial<SelectProps>,
      style: {
        minHeight: inputSize,
        [`& .${selectClasses.select}`]: {
          fontSize,
        },
        [`& .${selectClasses.icon}`]: {
          fontSize: iconSize,
        },
        [` .${inputAdornmentClasses.root}`]: {
          fontSize: iconSize,
          minHeight: inputSize,

          [`& > .${svgIconClasses.root}`]: {
            fontSize: iconSize,
            minWidth: inputSize,
          },
        },
      },
    };
  });

  return {
    defaultProps: {
      size: SIZE_MEDIUM,
      IconComponent: KeyboardArrowDownRounded,
      fullWidth: true,
      MenuProps: {
        slotProps: {
          list: {
            disablePadding: true,
          },
        },
      },
    },
    styleOverrides: {
      root: {
        padding: 0,
        cursor: 'pointer',
        overflow: 'auto',
      },
      select: {
        top: 0,
        paddingLeft: '12px',
        paddingRight: '12px',
        paddingTop: 0,
        paddingBottom: 0,
        fontSize: 14,
        lineHeight: 1.4,
        display: 'inline-block',
        alignItems: 'center',
        minHeight: 0,
        // marginRight: '32px',
      },
      icon: {
        fontSize: 'inherit',
      },
    },
    variants: [...variants],
  };
}
