import { mergeProps, splitProps, children, onCleanup, createEffect, createRenderEffect, createSignal, } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { createOverlayScrollbars } from './createOverlayScrollbars';
export const OverlayScrollbarsComponent = (props) => {
    const [finalProps, other] = splitProps(mergeProps({ element: 'div' }, props), ['element', 'options', 'events', 'defer', 'ref', 'children']);
    const [elementRef, setElementRef] = createSignal();
    const [childrenRef, setChildrenRef] = createSignal();
    const [initialize, instance] = createOverlayScrollbars(finalProps);
    // https://github.com/KingSora/OverlayScrollbars/issues/700
    // use the children helper outside of jsx: https://docs.solidjs.com/reference/component-apis/children
    const resolvedChildren = children(() => finalProps.children);
    createEffect(() => {
        const target = elementRef();
        const contentsElement = childrenRef();
        /* c8 ignore start */
        if (!target) {
            return;
        }
        /* c8 ignore end */
        initialize(finalProps.element === 'body'
            ? {
                target,
                cancel: {
                    body: null,
                },
            }
            : {
                target,
                elements: {
                    viewport: contentsElement,
                    content: contentsElement,
                },
            });
        onCleanup(() => {
            instance()?.destroy();
        });
    });
    createRenderEffect(() => {
        const ref = {
            osInstance: instance,
            getElement: () => 
            /* c8 ignore next */
            elementRef() || null,
        };
        if (typeof finalProps.ref === 'function') {
            finalProps.ref(ref);
        }
        else {
            finalProps.ref = ref;
        }
    });
    return (<Dynamic component={finalProps.element} data-overlayscrollbars-initialize="" ref={setElementRef} {...other}>
      {finalProps.element === 'body' ? (resolvedChildren()) : (<div data-overlayscrollbars-contents="" ref={setChildrenRef}>
          {resolvedChildren()}
        </div>)}
    </Dynamic>);
};