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

css`
.drawer {
	position: fixed;
	inset: 0;
	top: auto;

	z-index: 200;
	background: var(--theme-note-fg);

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

.drawer .handle {
	height: 1.5rem;
}

.drawer .handle button {
	display: block;

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

.drawer .scroller {
	display: flex;
	overflow: auto;
	width: 100%;
	padding: 1rem 0;

	transition: max-height 0.3s;
}

.drawer .contents {
	display: flex;

	align-items: flex-start;

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

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

.drawer .contents > .reply {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.drawer .contents > .reply textarea {
	flex: 1 1;
}
`;

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 ? '1rem' : height,
				}}
			>
				<div class="contents">
					{children}
				</div>
			</div>
		</div>
	);
};

export const Selection = ({ items, toggleSelected }) => {
	const [reply, setReply] = useState('');
	const dispatch = useDispatch();

	return (
		<Drawer height="8.55rem" >
			{items.map((item) => (
				<Note
					{...item}
					ellipsis
					onSelect={toggleSelected}
				/>
			))}
			{!!items.length && (
				<div class="reply">
					<textarea value={reply} onChange={(e) => setReply(e.target.value)} />
					<button onClick={() => {
						dispatch({
							type: 'reply',
							content: reply,
							to: items.map(i => i.id),
						})
						.then(() => setReply(''));
					}}>
						reply
					</button>
				</div>
			)}
		</Drawer>
	);
};