import React from 'react';
import type { Theme } from '@mui/material';
import { autocompleteClasses, inputAdornmentClasses, inputBaseClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';
import { CloseRounded, KeyboardArrowDownRounded } from '@mui/icons-material';

export default function MuiAutocomplete(theme: Theme): Components['MuiAutocomplete'] {
  return {
    defaultProps: {
      popupIcon: <KeyboardArrowDownRounded />,
      clearIcon: <CloseRounded />,
      fullWidth: true,
    },
    styleOverrides: {
      groupLabel: {
        paddingTop: theme.spacing(1),
        paddingBottom: theme.spacing(1),
        backgroundColor: theme.palette.shades[300],
        top: 0,

        '&:empty': {
          display: 'none',
        },
      },
      listbox: {
        paddingTop: 0,
        paddingBottom: 0,
      },
      inputRoot: {
        paddingTop: '0 !important',
        paddingLeft: '0 !important',
        paddingBottom: '0 !important',
        paddingRight: '0',

        ...(theme.direction === 'rtl' && {
          paddingRight: '0 !important',
        }),
      },
      root: {
        [`span.${autocompleteClasses.tag}`]: {
          fontSize: '0.8em',
        },
        [`.${inputBaseClasses.root}`]: {
          paddingRight: 'var(--internal-adornment-width) !important',

          ...(theme.direction === 'rtl' && {
            paddingLeft: 'var(--internal-adornment-width) !important',
            paddingRight: '0 !important',
          }),
        },
        [`.${inputAdornmentClasses.positionEnd}`]: {
          marginRight: 0,
          top: 0,
          position: 'absolute',
          right: '0 !important',
          display: 'flex',
          alignItems: 'flex-start',
          transform: 'translate(0, 0)',

          ...(theme.direction === 'rtl' && {
            right: 'auto !important',
            left: '0 !important',
          }),
        },
      },
      clearIndicator: {
        marginRight: 0,
        visibility: 'visible',
      },
      popupIndicator: {
        marginRight: 0,
      },
      input: {
        [`&.${inputBaseClasses.input}`]: {
          padding: `${theme.spacing(0, 0, 0, 3)} !important`,

          ...(theme.direction === 'rtl' && {
            padding: `${theme.spacing(0, 3, 0, 0)} !important`,
          }),
        },
      },
      paper: {
        boxShadow: theme.shadows[15],
        '&:empty': {
          opacity: 0,
          visibility: 'hidden',
        },
      },
      endAdornment: {
        top: 0,
        right: '0 !important',
        display: 'flex',
        alignItems: 'center',
        transform: 'translate(0, 0)',

        ...(theme.direction === 'rtl' && {
          right: 'auto !important',
          left: '0 !important',
        }),
      },
      tag: {
        margin: '4px 2px',
      },
      tagSizeSmall: {
        margin: '3px 2px',
      },
      tagSizeXSmall: {
        margin: '2px 2px',
      },
      option: {
        fontSize: 14,
        whiteSpace: 'break-spaces',
        flexWrap: 'nowrap',

        b: {
          fontWeight: 600,
        },

        strong: {
          fontWeight: 600,
        },
      },
    },
  };
}
