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

interface HighlighterPassthroughProps {
	onMatchFound: any;
	searchBoxText: string;
	filterStrings: string[];
	name: string;
	dimmed?: boolean;
	styles?: object;
}
interface ObjectNameProps {
	theme: string | object;
}

/**
 * A view for object property names.
 *
 * If the property name is enumerable (in Object.keys(object)),
 * the property name will be rendered normally.
 *
 * If the property name is not enumerable (`Object.prototype.propertyIsEnumerable()`),
 * the property name will be dimmed to show the difference.
 */
const ObjectName = (
	{ onMatchFound, searchBoxText, filterStrings, name, dimmed = false, styles }: HighlighterPassthroughProps,
	{ theme }: ObjectNameProps
) => {
	const themeStyles = createStyles("ObjectName", theme);
	const appliedStyles = {
		...themeStyles.base,
		...(dimmed ? themeStyles.dimmed : {}),
		...styles,
	};

	return (
		<span style={appliedStyles}>
			<Highlighter onMatchFound={onMatchFound} searchBoxText={searchBoxText} filterStrings={filterStrings} str={name} />
		</span>
	);
};

export default ObjectName;