const code = document.querySelector('[data-result]')
const grid = document.querySelector('[data-grid]')
const button = document.querySelector('[data-button]')
const inputs = [...document.querySelectorAll('[data-input]')]
const smallGrids = [...document.querySelectorAll('[data-sm-grid]')]
const infoBox = document.querySelector('[data-info]')

const real_sort = function(a, b) {return a - b}

const getInputValues = () => {
	return inputs.map(input => parseInt(input.value))
}

let grids = getInputValues()

const createArray = (n) => {
	const newArray = new Array(n).fill(1)
	return newArray.map((i, index) => 1 / n * index).slice(1)
}

const initialValues = () => {
	const grid1 = createArray(grids[0])
	const grid2 = createArray(grids[1])
	return [...grid1, ...grid2, 1].sort()
}

const render = (columns) => {
	const gridColumns = columns.map((column) => {
		return `${column}fr`
	}).join(' ')
	
	code.innerHTML = gridColumns
	grid.style.gridTemplateColumns = gridColumns
	renderGridElements(columns)
}

const gridIsMultiple = () => {
	const largestGrid = grids.sort(real_sort)[1]
	const smallestGrid = grids.sort(real_sort)[0]
	
	return largestGrid % smallestGrid === 0
}

const renderGridElements = (columns) => {
	const gridColumnElements = columns.map((el, index) => {
		return `<div class="item" style="--delay: ${index * 70}ms"></div>`
	}).join('')
	
	grid.innerHTML = gridColumnElements
}

const calculateGridColumns = () => {
	const smallestSegment = initialValues().reduce((acc, curr) => {
		let x = 1
		x = curr - acc < x ? curr - acc : x
		return x
	})

	let y = 0
	const tracks = []

	initialValues().map((column, index) => {
		const n = column / smallestSegment
		const roundedTrackValue = parseFloat(n.toFixed(2))
		
		/* Don’t include duplicate values */
		if (!tracks.includes(roundedTrackValue)) {
			return tracks.push(roundedTrackValue)
		}
	})

	const columns = []
	/* Probably refactor this */
	tracks.map((i, index) => {
		/* Multiply each column so it’s at least 1fr */
		const column = (i - y) * 10
		columns.push(column.toFixed(1))
		y = i
	})
	
	/* Get the smallest column, that will be 1fr, others will be n * 1fr */
	const sm = columns.reduce((acc, curr) => acc > curr ? curr : acc)
	const colsFrs = columns.map((col) => Math.round(col / sm))
	
	/* Filter out any that are 0 */
	return colsFrs.filter((i) => i > 0)
}

const buildGrid = (e) => {
	e.preventDefault()
	
	/* If one grid is multiple of the other, find the largest and build that grid */
	if (gridIsMultiple()) {
		const columns = new Array(grids.sort()[1]).fill(1)
		return render(columns)
	}

	return render(calculateGridColumns())
}

button.addEventListener('click', (e) => buildGrid(e))

const renderSmallGridItems = (quantity) => {
	const colsArray = new Array(quantity).fill(1)
	return colsArray.map((el) => {
		return `<div class="sm-grid__item"></div>`
	}).join('')
}

const renderSmallGrid = (index) => {
	const qty = getInputValues()[index]
	
	smallGrids[index].style.setProperty('--cols', qty)
	smallGrids[index].innerHTML = renderSmallGridItems(qty)
}

const renderInfo = () => {
	if (gridIsMultiple()) {
		infoBox.style.opacity = 1
		infoBox.setAttribute('aria-hidden', false)
	} else {
		infoBox.style.opacity = 0
		infoBox.setAttribute('aria-hidden', true)
	}
}

inputs.forEach((input, index) => {
	input.addEventListener('change', () => {
		grids = getInputValues()
		renderSmallGrid(index)
		renderInfo()
	})
})