import { createSignal, createEffect, getOwner, mergeProps, on, runWithOwner, Show } from 'solid-js';
import { createIntersectionObserver } from '@solid-primitives/intersection-observer';
export const GeneralObserver = (props) => {
    const props_ = mergeProps({ height: 0 }, props);
    const owner = getOwner();
    const [observerReference, setObserverReference] = createSignal();
    const [isVisible, setVisible] = createSignal(false);
    createEffect(on(observerReference, () => {
        const element = observerReference();
        element &&
            createIntersectionObserver(() => [element], ([entry]) => {
                if (entry.intersectionRatio > 0 && owner) {
                    setVisible(true);
                    runWithOwner(owner, () => props.onEnter?.());
                }
            }, {
                root: undefined,
                rootMargin: '400px',
                threshold: 0,
            });
    }));
    return (<div ref={setObserverReference} class={`observer-solid-social`}>
      <Show when={isVisible()} fallback={<div class="placeholder-solid-social" style={{
                width: '100%',
                ...(props_.height && { height: `${props_.height}px` }),
            }}/>}>
        {props_.children}
      </Show>
    </div>);
};