import { memo } from 'react';

import { styled } from '@mui/material/styles';
import MuiTextField from '@mui/material/TextField';
import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';

import type { Theme } from '../../@styles/theme-provider';

const StyledTextField = styled(MuiTextField)(({ theme }: { theme: Theme }) => ({
  '& > .MuiInputBase-formControl': {
    padding: `${theme.spacing(2, 1, 2, 2)} !important`,
    '& > .MuiInputBase-inputMultiline': {
      padding: `${theme.spacing(0, 1, 0, 0)} !important`
    }
  }
}));

export type TextareaProps = MuiTextFieldProps & {
  /**
   * Will automatically adjust the textarea height on keyboard and window resize events.
   */
  autoHeight?: boolean;
};

const Textarea = (props: TextareaProps) => {
  const { autoHeight, ...otherProps } = props;

  return <StyledTextField {...otherProps} {...(autoHeight && { rows: 0 })} multiline />;
};

const m = memo(Textarea);
export { m as Textarea };