import * as React from 'react';
import { ValidationState } from '../../../../../models/Validation';
import { TooltipProps } from '../../../../../containers/tooltip/Tooltip';
import { labelWrapperStyle, labelTooltip, labelStyle } from './label.style';
import ErrorMessage from '../errorMessage/ErrorMessage';

const LabelWrapper = (props: {
	name: string;
	label: string | React.ReactNode;
	errorMessage: string | React.ReactNode;
	valid?: ValidationState;
	palette: any;
	tooltip?: React.ReactElement<TooltipProps>;
	required?: boolean;
}) => {
	return (
		<div className={labelWrapperStyle()}>
			<div className={labelTooltip()}>
				<label className={labelStyle(props.palette, props.required)} htmlFor={props.name}>
					{props.label}
				</label>
				{props.tooltip && props.tooltip}
			</div>
			{props.valid === ValidationState.Invalid ? (
				<ErrorMessage errorMessage={props.errorMessage} palette={props.palette} />
			) : null}
		</div>
	);
};

export default LabelWrapper;