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

const Iframe = memo(function ({
 uischema,
 path,
 data,
 schema,
 rootSchema,
}: inputProps) {
 const uischemaData = uischema?.config?.main;
 const { pageName, permissions, theme,useJsonForms,serviceProvider } = useContext(DataContext);
 const fieldName = getFieldName(path);
 const ctx = useJsonForms();
 const dynamicStyle = React.useMemo(() => {
  return serviceProvider(
   ctx,
   {
    onClick: uischema.config?.main?.styleFunction || 'getStyle',
   },
   {
    event: { _reactName: 'onClick' },
    path,
   },
  );
 }, [data, path]);
 const componentStyle = { ...uischema.config?.style, ...dynamicStyle };
 return (
  <ComponentWrapper
   {...getComponentProps(
    `${pageName}:${fieldName}`,
    permissions,
    schema,
    rootSchema,
   )}
  >
   <Box sx={{ ...componentStyle.containerStyle }}>
    <iframe
     src={data ? data : uischemaData?.url}
     style={{
      ...theme?.BoxStyle,
      ...componentStyle,
     }}
     width={uischemaData?.width || '100%'}
     height={uischemaData?.height || '1250px'}
    />
   </Box>
  </ComponentWrapper>
 );
});
export default withJsonFormsControlProps(Iframe);