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

export class TilesView extends Component {
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** The glass context handed down */
		glassContext: PropTypes.object,
		/** A list of the tiles formatted properly for use from the ca-ui-toolkit */
		tiles: PropTypes.array,
		/** A list of the tiles unformatted with all information. This is to be used by glassContext */
		tileAssets: PropTypes.array,
		/** a boolean showing whether or not something can be uploaded is there is no data */
		allowUploadFiles: PropTypes.bool,
		/** An id used to remove context menus for tiles */
		stateId: PropTypes.string,
		/** A reference to the ES5 homeView object */
		homeView: PropTypes.object,
		/** A copy of the i18n object used to translate strings */
		stringGetter: PropTypes.object
	};

	static defaultProps = {
		tiles: []
	};

	state = {
		tiles: [],
		tileAssets: []
	};

	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.setState({
			tiles: this.props.tiles,
			tileAssets: this.props.tileAssets
		});
	}

	componentDidUpdate(prevProps) {
		if (prevProps.tiles.length !== this.props.tiles.length) {
			this.setState({
				tiles: this.props.tiles,
				tileAssets: this.props.tileAssets
			});
		} else {
			for (let i = 0; i < this.props.tiles.length; i++) {
				if (prevProps.tiles[i].label !== this.props.tiles[i].label || prevProps.tiles[i].type !== this.props.tiles[i].type ||prevProps.tiles[i].date !== this.props.tiles[i].date) {
					this.setState({
						tiles: this.props.tiles,
						tileAssets: this.props.tileAssets
					});
					break;
				}
			}
		}
	}

	render() {
		const { glassContext, stringGetter, homeView, stateId } = this.props;
		const { tiles, tileAssets } = this.state;

		let tileViews = tiles.map((tile, i) => {
			return <HomeTile key={i} content={tile} glassContext={ glassContext } asset={ tileAssets[i] } homeView={homeView} stateId={stateId} stringGetter={stringGetter} ></HomeTile>;
		});

		return(
			<div className="tilesViewContainer">
				<div className="assetTilesContainer">
					<FlexLayout direction="row" wrap="wrap" className="tileFlexLayout">
						{
							tileViews
						}
					</FlexLayout>
				</div>
			</div>
		);
	}
}