import type { Theme } from '@mui/material';
import { formLabelClasses, inputLabelClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

import { fontSizeLarge, fontSizeMedium, fontSizeSmall, fontSizeXSmall } from '@/mui/components/constants';

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

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

const label = {
  xSmall: {
    root: 0,
    shrink: 12,
  },
  small: {
    root: 2,
    shrink: 13,
  },
  medium: {
    root: 3,
    shrink: 14.5,
  },
  large: {
    root: 5,
    shrink: 15,
  },
};
export default function MuiInputLabel(theme: Theme): Components['MuiInputLabel'] {
  return {
    defaultProps: {
      shrink: true,
    },
    variants: [
      ...Object.keys(fontSizes).map((size) => ({
        props: { size: size as GeneralSizeProp },
        style: {
          fontSize: fontSizes[size as keyof typeof fontSizes],
          lineHeight: 2,
          transform: `translate(12px, ${label[size as keyof typeof label].root}px) scale(1)`,

          [`&.${inputLabelClasses.shrink}`]: {
            transform: `translate(12px, -${label[size as keyof typeof label].shrink}px) scale(0.8)`,
          },

          [`&.${inputLabelClasses.focused}`]: {
            transform: `translate(12px, -${label[size as keyof typeof label].shrink}px) scale(0.8)`,
          },

          [`&.${formLabelClasses.filled}`]: {
            transform: `translate(12px, -${label[size as keyof typeof label].shrink}px) scale(0.8)`,
          },
        },
      })),
    ],
    styleOverrides: {
      root: {
        color: theme.palette.text.secondary,
        padding: 0,
        fontSize: fontSizes.medium,
        lineHeight: 2,
        transform: `translate(12px, ${label.medium.root}px) scale(1)`,

        [`&.${inputLabelClasses.shrink}`]: {
          transform: `translate(12px, -${label.medium.shrink}px) scale(0.8)`,
        },

        [`&.${inputLabelClasses.focused}`]: {
          transform: `translate(12px, -${label.medium.shrink}px) scale(0.8)`,
        },

        [`&.${formLabelClasses.filled}`]: {
          transform: `translate(12px, -${label.medium.shrink}px) scale(0.8)`,
        },
      },
      filled: {
        [`&.${inputLabelClasses.shrink}`]: {
          '&.Mui-error': {
            color: theme.palette.error.main,
          },
        },
      },
    },
  };
}
