/**
 * Icons that go next to a log-type (e.g., warning triangle, error x, info i). Allows user to quickly go "Oh there's a lot of errors here..").
 */
import React from "react";

interface StyleIconProps {
	title: string;
}

export class ErrorIcon extends React.PureComponent<StyleIconProps> {
	constructor(props: StyleIconProps) {
		super(props);
	}

	render() {
		return (
			<span
				is="ui-icon"
				className="message-level-icon spritesheet-smallicons smallicon-error"
				title={this.props.title || "Error"}
				style={{
					backgroundPosition: "-40px 70px",
					width: "10px",
					height: "10px",
					marginRight: "5px",
				}}
			></span>
		);
	}
}

export class InfoIcon extends React.PureComponent<StyleIconProps> {
	constructor(props: StyleIconProps) {
		super(props);
	}

	render() {
		return (
			<span
				is="ui-icon"
				className="message-level-icon spritesheet-smallicons smallicon-info"
				style={{
					backgroundPosition: "-40px 50px",
					width: "10px",
					height: "10px",
					marginRight: "5px",
				}}
			></span>
		);
	}
}

export class WarnIcon extends React.PureComponent<StyleIconProps> {
	constructor(props: StyleIconProps) {
		super(props);
	}

	render() {
		return (
			<span
				is="ui-icon"
				className="message-level-icon spritesheet-smallicons smallicon-warning"
				style={{
					backgroundPosition: "-60px 10px",
					width: "10px",
					height: "10px",
					marginRight: "5px",
				}}
			></span>
		);
	}
}
export class NoIcon extends React.PureComponent<StyleIconProps> {
	constructor(props: StyleIconProps) {
		super(props);
	}

	render() {
		return (
			<span
				style={{
					width: "10px",
					height: "10px",
					marginRight: "5px",
				}}
			></span>
		);
	}
}

export const IconMap = {
	Error: ErrorIcon,
	Warn: WarnIcon,
	Info: InfoIcon,
	Debug: NoIcon,
	Log: NoIcon,
	Verbose: NoIcon,
};