import { inputBaseClasses, outlinedInputClasses, Theme } from '@mui/material';
import type { Components } from '@mui/material/styles';

import { mediumSize, smallSize } from '@/mui/components/constants';
import { SHAPE_CIRCULAR, SHAPE_SQUARE, SIZE_MEDIUM } from '@/mui/constants';

export default function MuiOutlinedInput(theme: Theme): Components['MuiOutlinedInput'] {
  return {
    defaultProps: {
      size: SIZE_MEDIUM,
      fullWidth: true,
    },
    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: {
          paddingLeft: 0,
          paddingRight: 0,
          [`.${inputBaseClasses.input}`]: {
            paddingLeft: 0,
            paddingRight: 0,
          },
        },
      },
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          borderRadius: 0,
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          borderRadius: theme.shape.borderRadiusCircular,
        },
      },
    ],
    styleOverrides: {
      root: {
        paddingLeft: theme.spacing(0),
        paddingRight: theme.spacing(3),
        fontSize: 14,
        backgroundColor: theme.palette.shades[100],
      },
      sizeSmall: {
        fontSize: 13,
      },
      inputSizeSmall: {
        height: smallSize,
        fontSize: 13,
      },
      notchedOutline: {
        padding: '0 0 0 6px',
        borderColor: theme.palette.shades[600],

        '& > legend': {
          fontSize: '0.8em',
          maxWidth: '100%',
        },

        [`.${outlinedInputClasses.root}:hover &`]: {
          borderWidth: 1,
          borderColor: theme.palette.shades[700],
        },

        [`.${outlinedInputClasses.root}.${outlinedInputClasses.focused} &`]: {
          borderWidth: 2,
          borderColor: theme.palette.primary.main,
        },

        [`.${outlinedInputClasses.root}.${outlinedInputClasses.focused}:hover &`]: {
          borderWidth: 2,
          borderColor: theme.palette.primary.main,
        },

        [`.${outlinedInputClasses.root}.${outlinedInputClasses.disabled} &`]: {
          borderColor: theme.palette.shades[300],
        },
      },
      input: {
        padding: theme.spacing(0, 0, 0, 3),
        height: mediumSize,
        fontSize: 14,
        lineHeight: 1.4,
        '&:-webkit-autofill': {
          border: '0',
          WebkitTextFillColor: theme.palette.text.primary,
          WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.shades[100]} inset`,
          transition: 'background-color 5000s ease-in-out 0s',
        },
        '&:-webkit-autofill:hover': {
          border: '0',
          WebkitTextFillColor: theme.palette.text.primary,
          WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.shades[100]} inset`,
          transition: 'background-color 5000s ease-in-out 0s',
        },
        '&:-webkit-autofill:focus': {
          border: '0',
          WebkitTextFillColor: theme.palette.text.primary,
          WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.shades[100]} inset`,
          transition: 'background-color 5000s ease-in-out 0s',
        },

        [`&.${outlinedInputClasses.disabled}`]: {
          color: theme.palette.text.secondary,
          WebkitTextFillColor: theme.palette.text.secondary,
        },
      },
    },
  };
}
