const { el } = wp.element.createElement
const { Component } = wp.element;
const { decodeEntities } = wp.utils;
const { __ } = wp.i18n;
const { RichText } = wp.blocks;

class TestDisplay extends Component {
	constructor(props) {
		super( props );
		this.onChangeHeading = this.onChangeHeading.bind(this);
		this.onChangeDescription = this.onChangeDescription.bind(this);
	}

	onChangeHeading(value, i) {
		var newHeadings = this.props.attributes.headings;
		newHeadings[i] = {};
		newHeadings[i].text = value[0];
		this.props.setAttributes( { headings: newHeadings } );
	}

	onChangeDescription(value, i) {
		var newDescriptions = this.props.attributes.descriptions;
		newDescriptions[i] = {};
		newDescriptions[i].text = value[0];
		this.props.setAttributes( { descriptions: newDescriptions } );
	}

	render() {

		var props = this.props;

		var columns = props.attributes.columns
		var headings = props.attributes.headings
		var descriptions = props.attributes.descriptions

		var output = [];

		for( let i = 0; i < columns; i = i + 1 ) {
			output.push(
				<div className="pricing-table__column">
					<RichText
						tagName="h3"
						value={ headings[i] && headings[i].text }
						placeholder={ 'Column Heading' }
						onChange={ ( value ) => this.onChangeHeading( value, i ) }
						className="pricing-table__heading"
						formattingControls={[]}
					/>
					<RichText
						tagName="span"
						value={ descriptions[i] && descriptions[i].text }
						placeholder={ 'Column Heading' }
						onChange={ ( value ) => this.onChangeDescription( value, i ) }
						className="pricing-table__description"
						formattingControls={[]}
					/>
				</div>
			);
		}

		return (
			<div className={props.className}>{output}</div>
		);
	};
}

export default TestDisplay;