import React, { memo, useContext } from "react";
import { Box } from "@mui/system";
import { inputProps } from "../interface/inputfieldProps";
import ComponentWrapper from "../common/ComponentWrapper";
import { getComponentProps } from "../common/getComponentProps";
import { DataContext } from "../context/Context";
import { getFieldName } from "../permissions/getFieldName";

const EmptyBox = memo(function EmptyBox(props: inputProps) {
  const { uischema, path, schema, rootSchema } = props;
  const { pageName, permissions, r } = useContext(DataContext);
  const fieldName = getFieldName(path);
  return (
    <ComponentWrapper
      {...getComponentProps(
        `${pageName}:${fieldName}`,
        permissions,
        schema,
        rootSchema
      )}
    >
      <Box id={path} sx={{ flexGrow: 1, ...uischema?.config?.style }}>
        <div style={{ width: "100%" }}></div>
      </Box>
    </ComponentWrapper>
  );
});

export default EmptyBox;