import { defineElement as el, defineSvgElement as sv } from '../../utils/domvm.js';

const ICON_PATHS = {
	check_circle: [
		'27 32',
		'M22.93 13.107q0-.5-.322-.82l-1.625-1.608q-.34-.34-.804-.34t-.807.34l-7.286 7.265L8.05 13.91q-.34-.338-.803-.338t-.805.34L4.82 15.517q-.32.32-.32.82 0 .483.32.805l6.464 6.464q.34.34.804.34.482 0 .82-.34l9.697-9.696q.32-.32.32-.803zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z'
	],
	circle_o: [
		'32 32',
		'M13.714 6.286q-2.643 0-4.875 1.304T5.3 11.126 4 16t1.303 4.876 3.536 3.536 4.872 1.304 4.875-1.304 3.535-3.536T23.43 16t-1.305-4.874T18.59 7.59t-4.876-1.304zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z'
	],
	upload: [
		'32 38',
		'M22.857 15.429q0-0.25-0.161-0.411l-6.286-6.286q-0.161-0.161-0.411-0.161t-0.411 0.161l-6.268 6.268q-0.179 0.214-0.179 0.429 0 0.25 0.161 0.411t0.411 0.161h4v6.286q0 0.232 0.17 0.402t0.402 0.17h3.429q0.232 0 0.402-0.17t0.17-0.402v-6.286h4q0.232 0 0.402-0.17t0.17-0.402zM34.286 20.571q0 2.839-2.009 4.848t-4.848 2.009h-19.429q-3.304 0-5.652-2.348t-2.348-5.652q0-2.321 1.25-4.286t3.357-2.946q-0.036-0.536-0.036-0.768 0-3.786 2.679-6.464t6.464-2.679q2.786 0 5.098 1.554t3.366 4.125q1.268-1.107 2.964-1.107 1.893 0 3.232 1.339t1.339 3.232q0 1.357-0.732 2.464 2.321 0.554 3.813 2.42t1.491 4.259z'
	],
	trash: [
		'32 32',
		'M9.143 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM13.714 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM18.286 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM20.571 26.071v-16.929h-16v16.929q0 0.393 0.125 0.723t0.259 0.482 0.188 0.152h14.857q0.054 0 0.188-0.152t0.259-0.482 0.125-0.723zM8.571 6.857h8l-0.857-2.089q-0.125-0.161-0.304-0.196h-5.661q-0.179 0.036-0.304 0.196zM25.143 7.429v1.143q0 0.25-0.161 0.411t-0.411 0.161h-1.714v16.929q0 1.482-0.839 2.563t-2.018 1.080h-14.857q-1.179 0-2.018-1.045t-0.839-2.527v-17h-1.714q-0.25 0-0.411-0.161t-0.161-0.411v-1.143q0-0.25 0.161-0.411t0.411-0.161h5.518l1.25-2.982q0.268-0.661 0.964-1.125t1.411-0.464h5.714q0.714 0 1.411 0.464t0.964 1.125l1.25 2.982h5.518q0.25 0 0.411 0.161t0.161 0.411z'
	],
	arrow_left: [
		'32 32',
		'M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z'
	],
	chevron_left: [
		'24 32',
		'M20.911 5.375l-9.482 9.482 9.482 9.482q0.339 0.339 0.339 0.804t-0.339 0.804l-2.964 2.964q-0.339 0.339-0.804 0.339t-0.804-0.339l-13.25-13.25q-0.339-0.339-0.339-0.804t0.339-0.804l13.25-13.25q0.339-0.339 0.804-0.339t0.804 0.339l2.964 2.964q0.339 0.339 0.339 0.804t-0.339 0.804z'
	],
	chevron_right: [
		'22 32',
		'M19.768 15.661l-13.25 13.25q-0.339 0.339-0.804 0.339t-0.804-0.339l-2.964-2.964q-0.339-0.339-0.339-0.804t0.339-0.804l9.482-9.482-9.482-9.482q-0.339-0.339-0.339-0.804t0.339-0.804l2.964-2.964q0.339-0.339 0.804-0.339t0.804 0.339l13.25 13.25q0.339 0.339 0.339 0.804t-0.339 0.804z'
	],
	unknown: [
		'32 32',
		'M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z'
	]
};

// const sizeBasis = 24;

export function Icon(props) {
	const { name, size } = props;
	const otherProps = Object.assign({}, props);
	const _size = (size || 1) + 1;
	const [boxBounds, path] = ICON_PATHS[name] || ICON_PATHS.unknown;

	delete otherProps.name;
	delete otherProps.size;

	return sv(
		`svg.icon.${name}`,
		Object.assign(
			{
				viewBox: '0 0 1 1',
				width: `${_size}em`,
				height: `${_size}em`
			},
			otherProps
		),
		[sv('svg', { viewBox: `0 0 ${boxBounds}` }, [sv('path', { d: path })])]
	);
}