import React from 'react';

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

export default {
	title: 'Scrollable'
};

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

const TestScroll = () => {
	const styles = useStyles();
	return (
		<Scrollable className={styles.scrollRoot}>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci assumenda cum officia
			quas reiciendis similique? Alias consequuntur cumque dolores ducimus eveniet labore,
			laborum nostrum, perferendis porro quam, qui sapiente veritatis. Lorem ipsum dolor sit
			amet, consectetur adipisicing elit. Adipisci assumenda cum officia quas reiciendis
			similique? Alias consequuntur cumque dolores ducimus eveniet labore, laborum nostrum,
			perferendis porro quam, qui sapiente veritatis. Lorem ipsum dolor sit amet, consectetur
			adipisicing elit. Adipisci assumenda cum officia quas reiciendis similique? Alias
			consequuntur cumque dolores ducimus eveniet labore, laborum nostrum, perferendis porro
			quam, qui sapiente veritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			Adipisci assumenda cum officia quas reiciendis similique? Alias consequuntur cumque
			dolores ducimus eveniet labore, laborum nostrum, perferendis porro quam, qui sapiente
			veritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci assumenda
			cum officia quas reiciendis similique? Alias consequuntur cumque dolores ducimus eveniet
			labore, laborum nostrum, perferendis porro quam, qui sapiente veritatis. Lorem ipsum
			dolor sit amet, consectetur adipisicing elit. Adipisci assumenda cum officia quas
			reiciendis similique? Alias consequuntur cumque dolores ducimus eveniet labore, laborum
			nostrum, perferendis porro quam, qui sapiente veritatis.
		</Scrollable>
	);
};

export const customColor = () => {
	const styles = useStyles();
	return (
		<div className={styles.root}>
			<TestScroll />
		</div>
	);
};

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

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