/* eslint-disable @typescript-eslint/no-explicit-any */
import  {
  useState,
  useRef,
  useCallback,
} from "react";

import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import { getIcon } from "./icons"
import { InputWidgetProps } from "./interface";
import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage"
import { getValidateMessageFunc } from "./utils"

import { AutoHeightContainer } from "@/widgetLibrary/PublicSector/AutoHeightContainer"

export const InputWidgetChild = (props: InputWidgetProps) => {
  const {
    label,
    placeholder,
    fullWidth,
    variant,
    disabled,
    type,
    styles,
    startAdornmentIconName,
    endAdornmentIconName,
    required,
    color,
    size,
    multiline,
    helperText,
    defaultValue,
    tooltipText,
    minLength,
    maxLength,
    pattern,
    regex,
    validateMessage,
    updateComponentHeight,
    handleUpdateDsl,
    hideValidationMessage,
  } = props;

const [inputValue] = useState(defaultValue);

const val = useRef(defaultValue);

const handleValidate = useCallback(
   (value?: string) => {

    const message = getValidateMessageFunc(value, {
      hideValidationMessage: false,
      pattern: pattern,
      regex: regex,
      minLength: minLength,
      maxLength: maxLength,
      required: required,
    })

    val.current= value;
    handleUpdateDsl({
      validateMessage: message,
      defaultValue:value,
    })
    return message
  },
  [
    handleUpdateDsl,
    maxLength,
    minLength,
    pattern,
    regex,
    required,
  ],
)

  const [errorMessage] = useState("");
  const handleChange = useCallback(
    (event: any) => {
      const { value } = event.target;
    

       
      handleValidate(value)
    },
    [handleValidate]
  );

  const renderAdornment = (position: any) => {
    const AdornmentComponent =
      position === "start"
        ? getIcon(startAdornmentIconName, null)
        : getIcon(endAdornmentIconName, null);
    return AdornmentComponent ? (
      <InputAdornment position={position}>{AdornmentComponent}</InputAdornment>
    ) : null;
  };

  return (
    <AutoHeightContainer updateComponentHeight={updateComponentHeight}>
    <TextField
      title={tooltipText}
      multiline={multiline}
      size={size}
      error={validateMessage !== ""}
      label={label}
      value={defaultValue}
      required={required}
      onChange={handleChange}
      placeholder={placeholder}
      fullWidth={fullWidth}
      variant={variant}
      disabled={disabled}
      sx={styles}
      InputProps={{
        startAdornment: renderAdornment("start"),
        endAdornment: renderAdornment("end"),
      }}
      type={type}
      color={color}
      helperText={errorMessage === "" ? helperText : errorMessage}
    />
    {((!hideValidationMessage&&validateMessage)&&inputValue)&&(
        <div
        >
          <InvalidMessage validateMessage={validateMessage} />
        </div>
      )}
     </AutoHeightContainer>
  );
};
export const InputWidget = ({ ...props }: InputWidgetProps) => (
  <InputWidgetChild {...props} />
);

InputWidget.displayName = "InputWidget";
