import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import cn from 'classnames';
import css from './css';
import { Note } from './Note';

css`
.drawer {
	background: var(--theme-note-fg);

	flex: 0 0 auto;

	/* wtf webkit */
  -webkit-backface-visibility: hidden;
}

.drawer .handle {
	height: 2rem;
	margin-bottom: 1rem;
}

.drawer .handle button {
	display: block;

	height: 2rem;
	line-height: 2rem;
	margin: -1rem auto 0;
	padding: 0.25rem;
	background: var(--theme-note-bg);
	border-radius: 0.4rem;
}

.drawer .scroller {
	display: flex;
	overflow: auto;
	width: 100%;

	transition: max-height 0.3s;
}

.drawer .contents {
	display: flex;

	align-items: flex-start;

	gap: 1rem;
	padding: 0 2rem;
}

.drawer .contents > * {
	flex: 0 0 auto;
}
`;

export const Drawer = ({ height, children }) => {
	const [ hidden, setHidden ] = useState(true);

	return (
		<div class="drawer">
			<div class="handle">
				<button onClick={() => setHidden(!hidden)}>
					###
				</button>
			</div>
			<div
				class="scroller"
				style={{
					height,
					'max-height': hidden ? '0' : height,
				}}
			>
				<div class="contents">
					{children}
				</div>
			</div>
		</div>
	);
};

export const Selection = ({ items, toggleSelected }) => (
	<Drawer height="12rem" style={{ }} >
		{items.map((item) => (
			<Note
				{...item}
				ellipsis
				onSelect={toggleSelected}
			/>
		))}
	</Drawer>
);