import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Accordion, AccordionItem, SVGIcon, Link } from 'ca-ui-toolkit';
import './QuickRef.scss';
import isString from 'lodash/isString';

export class QuickRef extends Component {
	static propTypes = {
		glassContext: PropTypes.object,
		itemData: PropTypes.object,
		contentData: PropTypes.array
	};

	static defaultProps = {
		itemData: {},
		contentData: []
	}

	itemChanged = false;

	constructor(props) {
		super(props);
		this.data = this._addContentToItem(props.itemData, props.contentData);

		this.state = {
			openItem: 0
		};
	}

	shouldComponentUpdate() {
		if (this.itemChanged) {
			return true;
		}
	}

	_addContentToItem = (itemData, contentData) => {
		const data = Object.assign({}, itemData);

		for (let i=0; i<contentData.length; i++) {
			data.panels[contentData[i].panelIndex-1].references.push(contentData[i]);
		}
		return data;
	}

	closeOtherTabs = (index) => {
		const { openItem } = this.state;

		this.itemChanged = true;

		if(openItem === index) {
			this.setState({ openItem: -1 });
		} else {
			this.setState({ openItem: index });
		}
	}

	_mapItem = (item,index) => {
		return (
			<AccordionItem key={index} itemName={item.label} open={index===this.state.openItem ? true : false} onChange={this.closeOtherTabs.bind(this, index)}>
				{item.references.map(this._mapContent)}
			</AccordionItem>);
	}

	// TODO: here!!!!!
	_mapContent = (reference) => {
		if (reference.type === 'video') {
			return this._createVideoItem(reference);
		} else if (reference.type === 'html'){
			return this._createHtmlItem(reference);
		} else {
			return this._createItem(reference);
		}
	}

	_createVideoItem = (data) => {
		return (<Link style={{ display: 'block' }} className='refVideoLink__targetLink' href= {data.href} target='_blank'>
			{this._createItemIcon()}{data.label}
		</Link>);
	}

	_createItemIcon = () => {
		let svgHref = 'ca_home-video_16';
		return (<SVGIcon className='clItemLinkIcon' iconId={svgHref}></SVGIcon>);
	}

	_createHtmlItem = () => {
		// TODO: if glass return html type, what should insert here??
		return <div></div>;
	}

	_createItem = (data) => {
		let url = data.href;
		let locale = this.props.glassContext && this.props.glassContext.getCoreSvc('.UserProfile').preferences.productLocale;
		// inject locale into URL where required
		if (isString(url) && isString(locale)) {
			url = url.replace(/{locale}/, locale);
		}
		return (<Link className='refLinkTarget' href={url} target='_blank'>{data.label}</Link>);
	}

	render() {
		const accordionItems = this.data.panels && this.data.panels.map(this._mapItem);
		return (
			<div className="ca-home-accordion">
				<div className='clRefCaption'>{this.data.label}</div>
				<Accordion id="accordion-left">
					{
						accordionItems
					}
				</Accordion>
			</div>
		);
	}
}