import React from 'react';

import InputUnstyled from '@mui/base/InputUnstyled';

import { Typography, TYPOGRAPHY_TYPE } from 'components/Typography';
import { bem } from 'utils/bem';

import { TextareaProps } from './types';
import { THEME } from '../../constants'; // TODO: Finish config Rollup to work properly with absolute path DEC-10606

import styles from './textarea.scss';

export const textareaClassName = bem(styles, 'textarea');

export const Textarea = React.forwardRef<HTMLDivElement, TextareaProps>(
  (
    {
      label,
      disabled = false,
      error,
      info,
      className,
      inputClassName,
      theme = THEME.light,
      inputProps,
      onTextChange,
      placeholder,
      value,
      ...htmlAttributes
    },
    ref,
  ): JSX.Element => (
    <div
      {...htmlAttributes}
      className={textareaClassName(null, { [theme]: true, disabled, hasError: Boolean(error) }, className)}
    >
      {label && (
        <Typography
          type={TYPOGRAPHY_TYPE.body3}
          className={textareaClassName('label')}
        >
          {label}
        </Typography>
      )}
      <InputUnstyled
        ref={ref}
        multiline
        slotProps={{
          input: {
            ...inputProps,
            className: textareaClassName('input'),
          },
        }}
        disabled={disabled}
        error={Boolean(error)}
        value={value}
        onChange={onTextChange}
        placeholder={placeholder}
        className={textareaClassName('wrapper', undefined, inputClassName)}
      />
      {error && (
        <Typography
          type={TYPOGRAPHY_TYPE.body4}
          className={textareaClassName('error')}
        >
          {error}
        </Typography>
      )}
      {info && !error && (
        <Typography
          type={TYPOGRAPHY_TYPE.body4}
          className={textareaClassName('info')}
        >
          {info}
        </Typography>
      )}
    </div>
  ),
);

Textarea.displayName = 'Textarea';