import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';

import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
import SearchIcon from '@material-ui/icons/Search';

export function Vierkant(props: {
	href?: string;
	width?: string;
	height?: string;
	children?: ReactNode;
	className?: string;
	id?: string;
	onclick?: () => void;
}) {
	return <a
		href={props.href}
		className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')}
		id={props.id}
		onClick={props.onclick}
	>
		{props.children}
	</a>;
}

export function Button(props: {
	text?: string;
	children?: ReactNode;
	href?: string;
	className?: string;
	onclick?: () => void;
	id?: string;
}) {
	return <a
		onClick={props.onclick}
		href={props.href}
		id={props.id}
		className={'button pad-s round-t ' + props.className}
	>
		{props.text
			? <span>
				{props.text}
			</span>
			: undefined}
		{props.children}
	</a>;
}

export function IconLabelButton(props: {
	text: string;
	icon: ReactNode;
	onclick?: () => void;
	href?: string;
	className?: string;
}) {
	return <Button
		onclick={props.onclick}
		href={props.href}
		className={"iconlabel dispinbl valigntop floatr" + " " + props.className}
	>
		<div className="dispinbl icon">
			{props.icon}
		</div>
		<span className="dispinbl valigntop label">
			{props.text}
		</span>
	</Button>;
}

export function Input(props: {
	label?: string;
	style?: CSSProperties;
	type?: string;
	id?: string;
	min?: number;
	max?: number;
	value?: string | number;
	dark?: boolean;
	autocomplete?: string;
	autofocus?: boolean;
	className?: string;
}) {
	return <input
		id={props.id}
		type={props.type || 'text'}
		min={props.min}
		max={props.max}
		placeholder={props.label}
		spellCheck={false}
		defaultValue={props.value ? String(props.value) : ''}
		className={'input' + ' ' + (props.dark ? 'dark' : 'light') + ' ' + props.className}
		autoComplete={props.autocomplete}
		autoFocus={props.autofocus}
	/>;
}

export function SearchBar(props: { label?: string; }) {
	return <div
		style={{
			marginTop: 24,
			borderRadius: 8,
			overflow: 'hidden',
			width: '100%',
		}}
	>
		<Input
			label={props.label}
			style={{
				width: 'calc(100% - 24px - 41px)',
				borderTopRightRadius: 0,
				borderBottomRightRadius: 0,
			}}
		/>
		<div
			style={{
				width: 41,
				height: 41,
				backgroundColor: 'var(--disk-a)',
				display: 'inline-block',
				verticalAlign: 'top',
				position: 'relative',
			}}
		>
			<SearchIcon
				style={{
					position: 'absolute',
					top: '50%',
					left: '50%',
					transform: 'translate(-50%, -50%)',
				}}
			/>
		</div>
	</div>;
}

export function CheckBox(props: {
	state?: boolean;
	style?: CSSProperties;
	id?: string;
	onclick?: (state: boolean) => void;
}) {
	var [gotDefaultState, setGotDefaultState] = useState(false);
	var [on, setOn] = useState(props.state);

	useEffect(() => {
		if (gotDefaultState) return;
		setOn(props.state);
		if (typeof props.state !== 'undefined') setGotDefaultState(true);
	});

	var toggle = () => {
		setOn(!on);
		props.onclick && props.onclick(!on);
	};

	return <div
		onClick={toggle}
		id={props.id}
		className={on ? 'on' : 'off'}
		style={{
			...props.style,
			display: 'inline-block',
			cursor: 'pointer',
		}}
	>
		{on
			? <CheckBoxIcon />
			: <CheckBoxOutlineBlankIcon />}
	</div>;
}

export function ColorPicker() {
	var [ dark, setDark ] = useState(false);
	var [ color, setColor ] = useState("#012345");

	return <Button className="colorpicker dispinbl valigntop pad-s floatr">
		<div>
			<EditOutlinedIcon />
			<div className="labelwrapper valigntop dispinbl center posrel">
				<span className="label posabs">
					{color}
				</span>
			</div>
		</div>
	</Button>;
}

export function Tuitje() {
	return <svg
		width='36'
		height='12'
		viewBox='0 0 36 12'
		fill='none'
		xmlns='http://www.w3.org/2000/svg'
		className="tuitje posabs"
	>
		<path
			d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
			fill='var(--background)'
		/>
	</svg>;
}

export function Bubble(props: {
	children?: ReactNode;
}) {
	return <Vierkant className="bubble posabs center drop-2">
		{props.children}
		<Tuitje />
	</Vierkant>;
}