import { filledInputClasses, inputBaseClasses, 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';

const inputFontSize = 14;
const inputSmallFontSize = 13;

export default function MuiFilledInput(theme: Theme): Components['MuiFilledInput'] {
  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,
          '&:before': {
            left: 0,
            right: 0,
          },
          '&:after': {
            left: 0,
            right: 0,
          },
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          borderRadius: theme.shape.borderRadiusCircular,
          '&:before': {
            left: 16,
            right: 16,
          },
          '&:after': {
            left: 16,
            right: 16,
          },
        },
      },
    ],
    styleOverrides: {
      root: {
        borderRadius: theme.shape.borderRadius,
        paddingLeft: theme.spacing(0),
        paddingRight: theme.spacing(3),
        fontSize: inputFontSize,
        transitionProperty: 'border-radius',
        transitionDuration: '0.5s',
        backgroundColor: theme.palette.shades[200],

        '&:hover': {
          backgroundColor: theme.palette.shades[200],
          '&:before': {
            opacity: 1,
          },
        },

        '&:before': {
          left: 4,
          right: 4,
          opacity: 0,
          borderBottomColor: theme.palette.shades[700],
        },

        '&:after': {
          left: 4,
          right: 4,
          borderBottomColor: theme.palette.primary.main,
        },

        '&.Mui-disabled': {
          backgroundColor: theme.palette.shades[100],

          '&:before': {
            opacity: 0,
          },
          '&:after': {
            opacity: 0,
          },
        },
      },
      sizeSmall: {
        fontSize: inputSmallFontSize,
      },
      inputSizeSmall: {
        height: smallSize,
        fontSize: 13,
      },
      input: {
        padding: theme.spacing(0, 3, 0, 3),
        lineHeight: 1.4,
        height: mediumSize,
        fontSize: 14,
        '&:-webkit-autofill': {
          border: '0',
          WebkitTextFillColor: theme.palette.text.primary,
          WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.shades[200]} 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[200]} 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[200]} inset`,
          transition: 'background-color 5000s ease-in-out 0s',
        },

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