import * as React from 'react';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
import Tooltip, { TooltipProps } from '../../../containers/tooltip/Tooltip';
import {
	tooltipStyle,
	closeInput,
	closeInputHeader,
	tooltipText,
	tooltipArrow
} from './tooltipOne.style';
library.add(faInfoCircle);

type TooltipOneProps = TooltipProps & {
	content?: JSX.Element;
	translator?: Function;
};

class TooltipOne extends React.Component<TooltipOneProps> {
	shouldComponentUpdate() {
		return false;
	}
	render() {
		return (
			<Tooltip
				{...this.props}
				icon={
					<FontAwesomeIcon
						icon="info-circle"
						className={tooltipStyle(this.props.palette)}
						//tabIndex={0}
					/>
				}
				render={(close: (e: React.MouseEvent<HTMLElement>) => void) => {
					return (
						<div>
							<header className={closeInputHeader(this.props.palette)}>
								<input
									className={closeInput(this.props.palette)}
									type="button"
									onClick={close}
									value={this.props.translator('tooltip.close').toString()}
								/>
							</header>
							<article className={tooltipText(this.props.palette)}>{this.props.content}</article>
							<div className={tooltipArrow(this.props.palette)} />
						</div>
					);
				}}
			/>
		);
	}
}

export default TooltipOne;