import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactHtmlParser from 'react-html-parser';
import './WelcomeTile.scss';
import { Multilinetruncatedtext } from 'ca-ui-toolkit';

export class WelcomeTile extends Component {
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** A copy of the i18n translation object */
		stringGetter: PropTypes.object,
		/** ID of the icon in the designated tile*/
		iconID: PropTypes.string,
		/** Key in the translation file (stringGetter) corresponding to the tile title*/
		titleKey: PropTypes.string,
		/** Key in the translation file (stringGetter) corresponding to the title description*/
		descriptionKey: PropTypes.string,
		/** Function invoked while the key is pressed (specifically for tab action)*/
		onKeyUp: PropTypes.func,
		/** Function invoked while the tile is clicked */
		onClick: PropTypes.func,
		/** Customized style */
		style: PropTypes.object,
		/** If the tile is the rightmost one or not */
		isLast: PropTypes.bool
	};

	render() {
		const { className, stringGetter, iconID, titleKey, descriptionKey, onKeyUp, onClick, style, isLast } = this.props;

		const truncatedTitleProps = { numLines: 2, style: { width: '100%' } };
		const truncatedDescriptionProps = { numLines: 3, style: { width: '100%' } };

		const combinedClassName = isLast ? `welcomeTile ${className}` : `welcomeTile welcomeTileWithBorder ${className}`;

		return <div tabIndex='0' onKeyUp={onKeyUp} className={combinedClassName} style={style} onClick={onClick}>
			<svg className="welcomeTileIcon">
				<use xlinkHref={`#${iconID}`} />
			</svg>
			<div className="welcomeTileTitle">
				<Multilinetruncatedtext value={stringGetter.get(titleKey)} {...truncatedTitleProps}/>
			</div>
			<div className="welcomeTileDescription">
				<Multilinetruncatedtext value={stringGetter.get(descriptionKey)} {...truncatedDescriptionProps}/>
			</div>
		</div>;
	}
}