import React from "react";
import Highlighter from "../../highlighter/Highlighter";
import createStyles from "../styles/createStyles";

interface ObjectValueProps {
	onMatchFound: Function;
	searchBoxText: string;
	filterStrings: string[];
	object: any;
	styles?: any;
}

interface ThemeProps {
	theme: string | object;
}

/**
 * A short description of the object values.
 * Can be used to render tree node in ObjectInspector
 * or render objects in TableInspector.
 */
const ObjectValue = (
	{ onMatchFound, searchBoxText, filterStrings, object, styles }: ObjectValueProps,
	{ theme }: ThemeProps
) => {
	const themeStyles = createStyles("ObjectValue", theme);
	const mkStyle = (key: string) => {
		return { ...themeStyles[key], ...styles };
	};

	switch (typeof object) {
		case "number":
			return (
				<span style={mkStyle("objectValueNumber")}>
					<Highlighter
						onMatchFound={onMatchFound}
						searchBoxText={searchBoxText}
						filterStrings={filterStrings}
						str={String(object)}
					/>
				</span>
			);
		case "string":
			return (
				<span style={mkStyle("objectValueString")}>
					<Highlighter
						onMatchFound={onMatchFound}
						searchBoxText={searchBoxText}
						filterStrings={filterStrings}
						str={object}
					/>
				</span>
			);
		case "boolean":
			return (
				<span style={mkStyle("objectValueBoolean")}>
					<Highlighter
						onMatchFound={onMatchFound}
						searchBoxText={searchBoxText}
						filterStrings={filterStrings}
						str={String(object)}
					/>
				</span>
			);
		case "undefined":
			return <span style={mkStyle("objectValueUndefined")}>undefined</span>;
		case "object":
			if (object === null) {
				return <span style={mkStyle("objectValueNull")}>null</span>;
			}
			if (object instanceof Date) {
				return (
					<span>
						<Highlighter
							onMatchFound={onMatchFound}
							searchBoxText={searchBoxText}
							filterStrings={filterStrings}
							str={object.toString()}
						/>
					</span>
				);
			}
			if (object instanceof RegExp) {
				return (
					<span style={mkStyle("objectValueRegExp")}>
						<Highlighter
							onMatchFound={onMatchFound}
							searchBoxText={searchBoxText}
							filterStrings={filterStrings}
							str={object.toString()}
						/>
					</span>
				);
			}
			if (Array.isArray(object)) {
				return <span>{`Array[${object.length}]`}</span>;
			}

			if (!object.constructor) {
				return <span>Object</span>;
			}

			return (
				<span>
					<Highlighter
						onMatchFound={onMatchFound}
						searchBoxText={searchBoxText}
						filterStrings={filterStrings}
						str={object.constructor.name}
					/>
				</span>
			);
		case "function":
			return (
				<span>
					<span style={mkStyle("objectValueFunctionKeyword")}>function</span>
					<span style={mkStyle("objectValueFunctionName")}>
						&nbsp;
						<Highlighter
							onMatchFound={onMatchFound}
							searchBoxText={searchBoxText}
							filterStrings={filterStrings}
							str={object.name}
						/>
						()
					</span>
				</span>
			);
		case "symbol":
			return (
				<span style={mkStyle("objectValueSymbol")}>
					<Highlighter
						onMatchFound={onMatchFound}
						searchBoxText={searchBoxText}
						filterStrings={filterStrings}
						str={object.toString()}
					/>
				</span>
			);
		default:
			return <span />;
	}
};

export default ObjectValue;