import {
    HorizontalLayout,
    LayoutProps,
    RankedTester,
    rankWith,
    uiTypeIs,
  } from "@jsonforms/core";
  import { withJsonFormsLayoutProps } from "@jsonforms/react";
  import { MaterialLayoutRendererProps } from "./Horizontal";
import Slider from "./Slider";
  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 SliderLayoutTester: RankedTester = rankWith(
    200,
    uiTypeIs("SliderLayout")
  );
  
  export const SliderLayoutControl = ({
    uischema,
    renderers,
    rootSchema,
    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?.sliderStyle
            ? { ...theme.WrapperStyle, ...uischema?.config?.sliderStyle }
            : {}
        }
      >
        <Slider
          {...childProps}
          rootSchema={rootSchema}
          renderers={renderers}
          cells={cells}
          uischema={uischema}
        />
     </div>
    );
  };
  export default withJsonFormsLayoutProps(SliderLayoutControl);