import React from 'react';

import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
import { ScrollableTextArea } from './scrollable-text-area';

export default {
	title: 'ScrollableTextArea'
};

const useStyles = makeStyles({
	root: {
		'width': '200px',
		'height': '100px',
		'& .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle': {
			backgroundColor: 'red !important'
		}
	}
});

const TestScroll = () => {
	const styles = useStyles();
	const text = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci assumenda cum officia
		\t\t\tquas reiciendis similique? Alias consequuntur cumque dolores ducimus eveniet labore,
		\t\t\tlaborum nostrum, perferendis porro quam, qui sapiente veritatis. Lorem ipsum dolor sit
		\t\t\tamet, consectetur adipisicing elit. Adipisci assumenda cum officia quas reiciendis
		\t\t\tsimilique? Alias consequuntur cumque dolores ducimus eveniet labore, laborum nostrum,
		\t\t\tperferendis porro quam, qui sapiente veritatis. Lorem ipsum dolor sit amet, consectetur
		\t\t\tadipisicing elit. Adipisci assumenda cum officia quas reiciendis similique? Alias
		\t\t\tconsequuntur cumque dolores ducimus eveniet labore, laborum nostrum, perferendis porro
		\t\t\tquam, qui sapiente veritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		\t\t\tAdipisci assumenda cum officia quas reiciendis similique? Alias consequuntur cumque
		\t\t\tdolores ducimus eveniet labore, laborum nostrum, perferendis porro quam, qui sapiente
		\t\t\tveritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci assumenda
		\t\t\tcum officia quas reiciendis similique? Alias consequuntur cumque dolores ducimus eveniet
		\t\t\tlabore, laborum nostrum, perferendis porro quam, qui sapiente veritatis. Lorem ipsum
		\t\t\tdolor sit amet, consectetur adipisicing elit. Adipisci assumenda cum officia quas
		\t\t\treiciendis similique? Alias consequuntur cumque dolores ducimus eveniet labore, laborum
		\t\t\tnostrum, perferendis porro quam, qui sapiente veritatis.`;

	return <ScrollableTextArea className={styles.root} defaultValue={text} />;
};

export const customColor = () => {
	return <TestScroll />;
};

export const conditional = () => {
	const [show, setShow] = React.useState(false);

	return (
		<div>
			<Button variant='contained' onClick={() => setShow(show => !show)}>
				Toggle
			</Button>
			{show && <TestScroll />}
		</div>
	);
};