import React from "react";
import "./Textarea.css";
import { Input as AntdInput } from "antd";
import Label from "../Label/Label";

const Textarea = (props) => {
  const {
    variant = "outlined",
    label = "",
    error = "",
    required = false,
    autoSize = { minRows: 2, maxRows: 6 },
    size = "medium",
    showCharacterCount = false,
    maxLength = 100,
    resize = false,
    className,
    ...rest
  } = props;

  const { TextArea: AntdTextarea } = AntdInput;

  if (resize && (autoSize?.minRows || autoSize?.maxRows)) {
    console.warn(
      'Both "resize" and "autoSize" props are provided. "autoSize" will be preferred, and "resize" will be ignored. autoSize:',
      autoSize
    );
  }

  return (
    <div>
      <Label label={label} required={required} className="veris_input_label" />
      <AntdTextarea
        variant={variant}
        size={size}
        autoSize={
          autoSize && Object.keys(autoSize)?.length
            ? {
                minRows: autoSize?.minRows, // default to 2
                maxRows: autoSize?.maxRows, // default to 6
              }
            : undefined
        }
        className={`veris_input${error ? " veris_input_error " : " "}${className ? className : ""}`}
        showCount={showCharacterCount}
        maxLength={maxLength}
        style={{ resize: resize ? "vertical" : "none" }}
        {...rest}
      />
      {/* [Error message] */}
      {error && <div className="error_text">{error}</div>}
    </div>
  );
};

export default Textarea;