import React, { Component } from 'react';

import Image from './Image';

class Item extends Component {
	constructor() {
		super();
		this.state = {
			displayOrder: ['image', 'name', 'price']
		};
	}

	getState() {
		const stateObj = Object.assign({}, this.state);
		return stateObj;
	}

	getProps() {
		const propsObj = Object.assign({}, this.props);
		return propsObj;
	}

	newRow(rowName, inputVal) {
        let divClass = `c-item-row c-item__${rowName}`;
        return <div key={rowName} className={divClass}>{inputVal}</div>;
    }

    getRows() {
    	const listOfRows = this.getState().displayOrder;
    	const propsObj = this.getProps();
    	const propsArray = [];

    	listOfRows.forEach(thisIndex => {
    		if(propsObj.hasOwnProperty(thisIndex)) {
	    		const thisValue = this.getFormattedValue(thisIndex, propsObj[thisIndex]);
	    		const newRow = this.newRow(thisIndex, thisValue);
	    		propsArray.push(newRow);
    		}
    	});

    	return propsArray;
    }

    getFormattedValue(inputType, inputVal) {
    	if(inputType === 'price')
    		return this.prettifyPrice(inputVal);

    	if(inputType === 'image')
    		return <Image src={inputVal} />

    	return inputVal;
    }

    prettifyPrice(inputVal) {
        let price = inputVal.toFixed(2);
        price = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        return `$${price}`;
    }

	render() {
		const propsObj = this.getRows();

		return (
			<div className="c-item">
				<div className="c-item__display">
					{propsObj}
				</div>
			</div>
		);
	}
}

export default Item;