//React.PropTypes has been deprecated, use prop-types instead. Recommended by facebook
import PropTypes from 'prop-types'

const TABLE_STYLES = ['Default', 'Striped Rows', 'Bordered Table', 'Hover Rows', 'Condensed Table', 'Contextual Classes']

export class Table extends Element2 {

	static get propTypes() {
		return {
			...super.propTypes,
            variant : PropTypes.string,
			rows: PropTypes.number,
			header: PropTypes.array,
			table: PropTypes.array,
		}
	}

	static get defaultProps() {
		return {
			...super.defaultProps,
			variant: 'Default', //default style
			rows: 2,
			header: ['foo', 'bar', 'baz'],
			table: [
				[1, 'David', 'BloodSeeker'],
				[2, 'Kelvin', 'Storm Spirit']
			]
		}
	}

	handleClick(_style = 'Default') {
		this.saveState({ variant : _style })
	}


	get inspector() {
		return {
			...super.inspector,
			content: <UI_Field_Content label="style">
				<UI_Field_Select options={TABLE_STYLES} bind="variant" />

			</UI_Field_Content>
		}
	}

	render() {
        return (
			<table>
				<colgroup>
					<col style={{ fontWeight: 'bold', color: 'red' }} />
					<col />
				</colgroup>
				<THeader header={this.state.header} />
				<TBody body={this.state.table} />
			</table>
        )
	}
}

class THeader extends React.Component {

	constructor(props) {
		super(props)
	}

	render() {
		return <thead>
			<tr>
				{this.props.header.map(e => {
					return <td> {e} </td>
				})}
			</tr>
		</thead>
	}
}

class TBody extends React.Component {
    render() {
        return <tbody>
				<tr>
					<th>1</th>
					<th>ahihi</th>
					<th>bloodseeker</th>
				</tr>
			</tbody>
    }
}