import {
  memo,
  useContext,
  useState,
} from "react";
import { TextareaAutosize } from "@mui/base/TextareaAutosize";
import { inputProps } from "../interface/inputfieldProps";
import { getFieldName } from "../permissions/getFieldName";
import { DataContext } from "../context/Context";
import { withJsonFormsControlProps } from "@jsonforms/react";
import { FormControl, InputLabel } from "@mui/material";
import ComponentWrapper from "../common/ComponentWrapper";
import { getComponentProps } from "../common/getComponentProps";
import Helpertext from "../common/Helpertext";
import { useDebouncedChange } from "@jsonforms/material-renderers";

const Textarea = memo(function (props: inputProps) {
  const { data, uischema, path, handleChange, schema, rootSchema, errors } =
    props;
  const uischemaData = uischema?.config?.main;
  const { pageName, permissions, theme } = useContext(DataContext);
  const eventToValue = (ev: any) =>
    ev.target.value === "" ? undefined : ev.target.value;
  const [inputText, onChange] = useDebouncedChange(
    handleChange,
    "",
    data,
    path,
    eventToValue
  );
  const fieldName = getFieldName(path);
  return (
    <ComponentWrapper
      {...getComponentProps(
        `${pageName}:${fieldName}`,
        permissions,
        schema,
        rootSchema
      )}
    >
      <FormControl
        fullWidth={true}
        sx={{
          position: "relative",
          "& .editorClass": {
            border: `1.5px solid ${theme.myTheme.palette.text.disabled}`,
          },
          "& .editorClass textarea": {
            outline: `none`,
          },
          "& .editorClass:focus-within": {
            border: `1.5px solid ${theme.myTheme.palette.primary.main}`,
          },
          "& .textAreaClass": {
            border: `1.5px solid ${theme.myTheme.palette.text.disabled}`,
            "&::placeholder": {
              color: theme.myTheme.palette.secondary.light,
            }
          },
          "& .textAreaClass:focus-visible": {
            border: `1.5px solid ${theme.myTheme.palette.primary.main}`,
            outline: "none",
          },
          "&:hover": {
            "& .textAreaClass": {
              border: `1.5px solid ${theme.myTheme.palette.primary.main}`,
            },
            "& .editorClass": {
              border: `1.5px solid ${theme.myTheme.palette.primary.main}`,
            },
          },
          ...theme.InputFieldStyle,
          "& .MuiFormLabel-root:not(.MuiInputLabel-shrink)": {},
          ...uischema?.config?.style,
        }}
      >
        {(uischemaData?.heading || uischemaData.label) && (
          <InputLabel
            disabled={
              uischemaData.disabled ||
              getComponentProps(
                `${pageName}:${fieldName}`,
                permissions,
                schema,
                rootSchema
              ).disabled
            }
            sx={{
              fontSize: theme.myTheme.typography.fontSize,
              position: "relative",
              padding: "0px 4px",
              borderRadius: "10px",
              top: "-10px",
              left: "10px",
              zIndex: 4,
              background: "white",
              width: "fit-content",
              ...uischema?.config?.style,
            }}
            htmlFor="textarea-label"
            variant="standard"
          >
            {uischemaData?.heading || uischemaData.label}
          </InputLabel>
        )}
  
          <TextareaAutosize
            id={path}
            aria-label="textarea-label"
            className="textAreaClass"
            placeholder={uischemaData.placeholder || "Write your content here"}
            style={{
              width: "100%",
              margin: "auto",
              borderRadius: "10px",
              // background: "#121717",
              // color: "white",
              paddingTop: "16px",
              paddingLeft: "14px",
              resize: "none",
              ...uischema.config?.style,
            }}
            value={inputText}
            minRows={uischemaData?.minRows || 5}
            minLength={350}
            disabled={
              uischemaData.disabled ||
              getComponentProps(
                `${pageName}:${fieldName}`,
                permissions,
                schema,
                rootSchema
              ).disabled
            }
            onChange={(event) => onChange(event)}
          />
        <Helpertext uischema={uischema} errors={errors} />
      </FormControl>
    </ComponentWrapper>
  );
});

export default withJsonFormsControlProps(Textarea);