import { useCallback, useState } from "react";
import { TextAreaProps } from "./interface";
import { getValidateMessageFunc } from "../InputWidget/utils";
import React from "react";
import { HelperText, TextInput } from "react-native-paper"
import { View } from "react-native";
import { InvalidMessageNative } from "../PublicSector/InvalidMessageNative";


export const TextAreaNative = ({
  label,
  helperText,
  error,
  styles,
  placeholder,
  required,
  tooltipText,
  updateComponentHeight,
  maxLength,
  minLength,
  pattern,
  defaultValue,
  regex,
  disabled,
  readOnly,
  colorScheme,
  validateMessage,
  handleUpdateDsl,
  hideValidationMessage,
  numberOfLines = 4,
  variant ="outlined",
  ...props
}: TextAreaProps) => {
  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: string) => {
    // console.log("valueTextNative >>", value);
    handleValidate(event);
  };
   
  

  return (
    <>
      <TextInput
        label={label}
        value={textAreaValue}
        onChangeText={handleChange}
        placeholder={placeholder}
        mode={variant}
        disabled={disabled}
        error={error}
        multiline={true}
        numberOfLines={numberOfLines}
        activeOutlineColor={colorScheme}
        style={{backgroundColor: "#ffffff"}}
        
      />
      {
        helperText &&
        <HelperText type={error ? 'error' : 'info'} disabled={disabled}>
          {helperText}
        </HelperText>
      }
      {!hideValidationMessage && (
        <View
          // style={flattenedStyles}
        >
          <InvalidMessageNative validateMessage={validateMessage} />
        </View>
      )}

    </>
  );
};
