// @see http://graaf.space
import gridLink from '../html/grid'

export default class EnvClass {
	constructor () {
		this.$body = $('.development')

		if (this.$body.length) {
			this.setGrid()
			this.setGridEvents()
			this.loadGrid()
		}
	}

	setGrid () {
		this.$grid = this.$body.find('.env')
		this.gridWidth = 1200
		this.gridColumns = 12
		this.gridGutter = 30
	}

	setGridEvents () {
		this.$grid.click(() => this.toggleGrid())
		$(window).resize(this.hideGrid)
	}

	loadGrid () {
		this.$body.append(gridLink(this.gridWidth, this.gridColumns, this.gridGutter))
		this.toggleGrid()
	}

	toggleGrid () {
		this.$body.toggleClass('no-grid')
	}

	hideGrid () {
		if (window.matchMedia(`(max-width: ${this.gridWidth}px)`).matches) {
			this.$body.addClass('no-grid')
		}
	}
}
