import { useCallback, useState } from "react";
import {
  TextareaAutosize,
  FormControl,
  InputLabel,
  FormHelperText,
  useTheme,
} from "@mui/material";
import { TextAreaProps } from "./interface";
import { getValidateMessageFunc } from "../InputWidget/utils";
import { AutoHeightContainer } from "@/widgetLibrary/PublicSector/AutoHeightContainer";
import { InvalidMessage } from "../PublicSector/InvalidMessage";

export const TextArea = ({
  label,
  helperText,
  error,
  styles,
  minRows,
  maxRows,
  placeholder,
  required,
  tooltipText,
  updateComponentHeight,
  maxLength,
  minLength,
  pattern,
  defaultValue,
  regex,
  disabled,
  readOnly,
  // colorScheme,
  validateMessage,
  handleUpdateDsl,
  hideValidationMessage,
  ...props
}: TextAreaProps) => {
  const theme = useTheme()
  const [textAreaValue, setTextAreaValue] = useState(defaultValue);
  const handleValidate = useCallback(
    (value?: string) => {
      const message = getValidateMessageFunc(value, {
        hideValidationMessage,
        pattern: pattern,
        regex: regex,
        minLength: minLength,
        maxLength: maxLength,
        required: required,
      });
      handleUpdateDsl({
        validateMessage: message,
      });
      setTextAreaValue(value);
      return message;
    },
    [
      handleUpdateDsl,
      maxLength,
      minLength,
      pattern,
      regex,
      required,
      hideValidationMessage,
    ]
  );

  const handleChange = (event) => {
    const { value } = event.target;
    handleValidate(value);
  };

  return (
    <>
      <div style={{ width: "100%" }}>
        <FormControl
          fullWidth
          variant="standard"
          error={error}
          {...props}
          sx={styles}
        >
          <InputLabel
            sx={
              label && {
                position: "relative",
                paddingLeft: "10px",
                borderRadius: "10px",
                top: "-10px",
                left: "10px",
                zIndex: 4,
                
                background: theme.palette.background.paper,
                width: "100px",
                border: `1px solid ${theme.palette.action.focus}`,
              }
            }
          >
            {label}
          </InputLabel>
          <TextareaAutosize
            {...props}
            readOnly={readOnly}
            disabled={disabled}
            title={tooltipText}
            minRows={minRows}
            maxRows={maxRows}
            value={textAreaValue}
            defaultValue={defaultValue}
            onChange={handleChange}
            placeholder={placeholder}
            required={required}
            style={{
              color:theme.palette.text.primary,
              width: "100%",
              margin: "auto",
              borderRadius: "10px",
              paddingTop: "12px",

              paddingLeft: "5px",
              background: theme.palette.background.paper,
            }}
          />
          {helperText && <FormHelperText>{helperText}</FormHelperText>}
        </FormControl>
      </div>
      {!hideValidationMessage && (
        <div>
          <InvalidMessage validateMessage={validateMessage} />
        </div>
      )}
    </>
  );
};
