import Component from '../../rivets/Component.js'
import { bindable } from '../../rivets/helpers.js'

// Component for the slots at the top of the Connect-4 grid
export default class GridSlots extends Component {
	static selector() { return 'app-grid-slots' }
	static template() { return `
		<div class="grid-slots-container">
			<div class="grid-slot-outer" rv-each-column="columns" rv-on-click="column.on_click">
				<div class="grid-slot-inner"></div>
			</div>
		</div>
	` }

	columns = []

	constructor(el, data) {
		const { nColumns, parentGrid } = data
		super(el, data)

		this.parent_grid = parentGrid

		// Populate the columns in this object
		this.columns = Array(8).fill().map((x,i) => this.column_state(i));
	}

	// Called when a column is clicked - pass the event up
	on_column_clicked(column_number) {
		if ( this.parent_grid.allow_drop )
			this.parent_grid.on_drop(column_number)
	}

	// Get the state object for a single column
	column_state(column_number) {
		return {
			on_click: () => {
				this.on_column_clicked(column_number)
			}
		}
	}
}