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

// A row of cells in the Connect-4 grid
export default class GridRow extends Component {
	static selector() { return 'app-grid-row' }
	static template() { return `
		<div class="grid-row-container">
			<app-grid-cell parent-row="self" column-number="0"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="1"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="2"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="3"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="4"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="5"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="6"></app-grid-cell>
			<app-grid-cell parent-row="self" column-number="7"></app-grid-cell>
		</div>
	` }

	cells = Array(8).fill()

	constructor(el, data) {
		super(el, data)

		// This row's row-number
		this.row_number = data.rowNumber;

		this.parent_grid = data.parentGrid;
		this.parent_grid.register_row(this, this.row_number);
	}

	// Callback for cell creation - gives access to the cell component classes
	register_cell(cell_class, column_number) {
		this.cells[column_number] = cell_class;
	}
}