import React from 'react';
import OverlayScrollbars from 'overlayscrollbars';

import { ExternalRef } from '../shared/external-ref';
import { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';

export function useOverlayScrollbars(
	externalRef: ExternalRef,
	props: OverlayScrollbarsComponentProps
) {
	const target = React.useRef<HTMLDivElement | null>(null);
	const instance = React.useRef<OverlayScrollbars | null>(null);

	React.useImperativeHandle(externalRef, () => ({
		instance: () => instance.current,
		target: () => target.current
	}));

	React.useEffect(() => {
		instance.current = OverlayScrollbars(
			target.current,
			props?.options || {},
			props?.extensions
		);

		return () => {
			if (OverlayScrollbars.valid(instance.current)) {
				instance.current.destroy();
				instance.current = null;
			}
		};
	}, []);

	React.useEffect(() => {
		if (OverlayScrollbars.valid(instance.current)) {
			instance.current.options(props?.options || {});
		}
	}, [props?.options]);

	return { target, instance };
}