import classNames from "classnames/dedupe";
import type { RefAttributes } from "react";
import type { DOMProps } from "../../types/dom";

export type TextAreaInputElementType = HTMLTextAreaElement;

export interface InteractionStateProps {
  isSelected?: boolean;
  isDisabled?: boolean;
}

export interface TextAreaInputProps
  extends
    DOMProps,
    InteractionStateProps,
    RefAttributes<TextAreaInputElementType> {
  className?: string;
  isReadOnly?: boolean;
  isRequired?: boolean;
}

const TextAreaInput = ({ ref, ...props }: TextAreaInputProps) => {
  // Extract interaction props:
  const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } =
    props;

  const classes = classNames(
    "mobius",
    "mobius-text-area__input",
    {
      "--is-disabled": isDisabled,
      "--is-selected": isSelected,
      "--is-required": isRequired,
    },
    otherProps.className,
  );

  return (
    <textarea
      ref={ref}
      {...otherProps}
      required={isRequired}
      readOnly={isReadOnly}
      className={classes}
    />
  );
};

TextAreaInput.displayName = "TextAreaInput";
export { TextAreaInput };
