import {
  HorizontalLayout,
  LayoutProps,
  RankedTester,
  rankWith,
  uiTypeIs,
} from '@jsonforms/core';
import { withJsonFormsLayoutProps } from '@jsonforms/react';
import {
  MaterialLayoutRendererProps
} from './Horizontal';
import { CustomTabLayout } from './Tab';
import { useContext } from 'react';
import { DataContext } from '../context/Context';
import { inputProps } from '../interface/inputfieldProps';
 import { getHiddenKeys } from '../common/getHiddenKeys';

/**
 * Default tester for a horizontal layout.
 * @type {RankedTester}
 */
export const TabLayoutTester: RankedTester = rankWith(
  200,
  uiTypeIs('TabLayout')
);

export const TabLayoutControl = ({ uischema, renderers, cells, schema, path, enabled, visible }: LayoutProps & inputProps) => {
  const { theme } =
    useContext(DataContext);
  const layout:any = uischema as HorizontalLayout;
  const childProps: MaterialLayoutRendererProps = {
    elements: layout.elements,
    schema,
    path,
    enabled,
    direction: 'row',
    visible
  };

  let hiddenKeys = getHiddenKeys(schema);
  let scope = layout?.scope;

  if (scope && hiddenKeys.includes(scope)) {
    return null;
  }

  return (
    <div style={uischema?.config?.defaultStyle || uischema?.config?.wrapperStyle ? { ...theme.WrapperStyle, ...uischema?.config?.wrapperStyle } : {}}>
      <CustomTabLayout {...childProps} renderers={renderers} cells={cells} uischema={uischema} />
    </div>)
};
export default withJsonFormsLayoutProps(TabLayoutControl);