import type { Theme } from '@mui/material';
import {
  iconButtonClasses,
  inputAdornmentClasses,
  inputBaseClasses,
  outlinedInputClasses,
  selectClasses,
  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 { SHAPE_CIRCULAR, SHAPE_SQUARE, SIZE_MEDIUM } from '@/mui/constants';

import { GeneralSizeProp } from '@/mui/types';

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,
};

const paddingSizes = {
  xSmall: [4, 4],
  small: [6.5, 6],
  medium: [8, 8],
  large: [11, 11],
};

export default function MuiTextField(theme: Theme): Components['MuiTextField'] {
  return {
    defaultProps: {
      size: SIZE_MEDIUM,
      fullWidth: true,
      slotProps: {
        select: {
          IconComponent: KeyboardArrowDownRounded,
        },
      },
    },
    variants: [
      {
        props: { textAlign: 'left' },
        style: {
          [`.${inputBaseClasses.input}`]: {
            textAlign: 'left',
          },
        },
      },
      {
        props: { textAlign: 'center' },
        style: {
          [`.${inputBaseClasses.input}`]: {
            textAlign: 'center',
          },
        },
      },
      {
        props: { textAlign: 'right' },
        style: {
          [`.${inputBaseClasses.input}`]: {
            textAlign: 'right',
          },
        },
      },
      {
        props: { margin: 'none' },
        style: {
          [`.${inputBaseClasses.input}`]: {
            paddingLeft: 0,
            paddingRight: 0,
          },
          [`.${outlinedInputClasses.root}`]: {
            paddingLeft: 0,
            paddingRight: 0,
          },
        },
      },
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          [`& .${inputBaseClasses.root}`]: {
            borderRadius: 0,
            '&:before': {
              left: 0,
              right: 0,
            },
            '&:after': {
              left: 0,
              right: 0,
            },
          },
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          [`& .${inputBaseClasses.root}`]: {
            borderRadius: theme.shape.borderRadiusCircular,
            '&:before': {
              left: 16,
              right: 16,
            },
            '&:after': {
              left: 16,
              right: 16,
            },
          },
        },
      },
      ...Object.keys(fontSizes).map((size) => {
        const inputSize = sizes[size as keyof typeof sizes];
        const iconSize = iconSizes[size as keyof typeof iconSizes];
        const [mPTop, mPBottom] = paddingSizes[size as keyof typeof paddingSizes];
        const fontSize = fontSizes[size as keyof typeof fontSizes];

        return {
          props: { size: size as GeneralSizeProp },
          style: {
            fontSize,
            [`& .${selectClasses.icon}`]: {
              fontSize: iconSize,
            },
            [`& .${inputBaseClasses.root}`]: {
              fontSize,
              paddingTop: 0,
              paddingBottom: 0,
              minHeight: inputSize,
            },
            [`& .${iconButtonClasses.root}`]: {
              fontSize: iconSize,
              width: inputSize,
              height: inputSize,
            },
            [` .${inputAdornmentClasses.root}`]: {
              fontSize: iconSize,
              minHeight: inputSize,

              [`& > .${svgIconClasses.root}`]: {
                fontSize: iconSize,
                minWidth: inputSize,
              },
            },
            [` .${outlinedInputClasses.notchedOutline}`]: {
              fontSize,
            },
            [` .${inputBaseClasses.input}`]: {
              fontSize,
              height: inputSize,
            },
            [`& .${inputBaseClasses.inputMultiline}`]: {
              marginTop: mPTop,
              marginBottom: mPBottom,
            },
          },
        };
      }),
    ],
    styleOverrides: {
      root: {
        position: 'relative',

        '&:before': {
          left: 4,
          right: 4,
        },

        '&:after': {
          left: 4,
          right: 4,
        },
      },
    },
  };
}
