import {random} from './utils.js';

import OnTap from './onTap.js';
import Point from './point.js';
import Sketch from './sketch.js';

import TileCircle from './tileCircle.js';
import TileHex    from './tileHex.js';
import TileSquare from './tileSquare.js';

import Cell from './cell.js';

export default class Tessellate {
	constructor(settings) {
		['draw'].map(method => {this[method] = this[method].bind(this)});

		this.element = document.querySelector(settings.element);

		this.sketch = new Sketch({
			element: this.element,
			draw: this.draw
		});

		this.map = [];

		this.onTap = new OnTap({
			element: this.element,
			click: (event) => {
				let x = event.pageX;
				let y = event.pageY;
				let tiles = ['circle', 'hex', 'square'];
				let styles = ['filled', 'outline'];
				let scale = random(10, 50);

				this.map.push(new Cell({
					tile: tiles[random(tiles.length-1)],
					style: styles[random(styles.length-1)],
					name: 'gavin',
					x,
					y,
					scale,
					pointyTop: random(1) ? true : false,
					red: random(255),
					green: random(255),
					blue: random(255),
					alpha: 0.5
				}));
			}
		});

		this.circle  = new TileCircle({context: this.sketch.getContext()});
		this.hex     = new TileHex({context: this.sketch.getContext()});
		this.square  = new TileSquare({context: this.sketch.getContext()});
	}

	draw(context, now, lastTime) {
		let canvas = context.canvas;
		let width = canvas.width;
		let height = canvas.height;

		context.clearRect(0, 0, width, height);

		this.map.forEach(cell => this[cell.tile][cell.style](cell));
	}
}