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

import clsx from 'clsx';
import composeRefs from '@seznam/compose-react-refs';

import { ScrollableHandle } from '@material-scrollbars/core';
import { useGlobalOsStyles, useOverlayScrollbars } from '@material-scrollbars/core';

export type ScrollableTextAreaProps = JSX.IntrinsicElements['textarea'] & {
	options?: OverlayScrollbars.Options;
	extensions?: OverlayScrollbars.Extensions;
	inputRef?: React.Ref<any>;
};

export const ScrollableTextArea = React.forwardRef<ScrollableHandle, ScrollableTextAreaProps>(
	function ScrollableTextArea(props, ref) {
		const { children, className, options, extensions, inputRef, ...rest } = props;

		const os = useOverlayScrollbars(ref, { options, extensions });
		useGlobalOsStyles();

		return (
			<textarea
				{...rest}
				hidden
				className={clsx('os-host', className)}
				ref={composeRefs(os.target, inputRef)}
			/>
		);
	}
);