const $wrapper = document.querySelector('.wrapper')
const $grid = document.querySelector('.grid')
const $items = [...document.querySelectorAll('.grid__item')]
const $btn = document.querySelector('[data-btn]')
const $color = document.querySelector('[data-color]')
const $copy = document.querySelector('[data-copy]')
const $codeBlock = document.querySelector('[data-code]')
const $fw = document.querySelector('[data-fw]')

const getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

const calculateItemProps = () => {
	return $items.map(() => {
		return {
			span: getRandomInt(1, 7),
			blur: getRandomInt(1, 10)
		}
	})
}

const findMax = (size, totalTracks) => {
	return totalTracks - size
}

const randomBlur = (el, blur) => {
	el.style.setProperty('--blur', `${blur}px`)
}

const showStyles = (h1, h2, array) => {
	$codeBlock.innerHTML = 
`<pre>
.grid {
	--h1: ${h1};
	--h2: ${h2};
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: repeat(9, 1fr);
	grid-gap: 10px;
	padding: 20px;
	background: 
		linear-gradient(60deg, 
		hsl(var(--h1), 100%, 50%), 	
		hsl(var(--h2), 50%, 40%));
}

.grid__item {
	grid-column: 
		var(--colStart, 1) / span var(--span, 3);
	grid-row:
		var(--rowStart, 1) / span var(--span, 3);
	border: 4px solid rgba(black, 0.5);
	mix-blend-mode: soft-light;
}

.grid__item:nth-child(even) {
	filter: blur(var(--blur, 0px));
}

${array}
</pre>`
}

const getItemStyles = ({ span, posX, posY, blur }, index) => {
	return (
`.grid__item:nth-child(${index + 1}) {
	--colStart: ${posX};
	--rowStart: ${posY};
	--span: ${span};
	--blur: ${blur};
}

`
	)
}

let itemStylesArray = []

let h1
let h2

const generateLayout = () => {
	const itemsSizes = calculateItemProps()
	itemStylesArray = []
	h1 = getComputedStyle($grid).getPropertyValue('--h1')
	h2 = getComputedStyle($grid).getPropertyValue('--h2')
	
	itemsSizes.map(({ span, blur }, index) => {
		const $el = $items[index]
		const maxPosX = findMax(span, 18)
		const maxPosY = findMax(span, 11)
		const posX = getRandomInt(1, maxPosX)
		const posY = getRandomInt(1, maxPosY)
		
		$el.style.setProperty('--span', span)
		$el.style.setProperty('--colStart', posX)
		$el.style.setProperty('--rowStart', posY)
		
		randomBlur($el, blur)
		
		$el.props = {
			span, posX, posY, blur
		}
		
		itemStylesArray.push(getItemStyles($el.props, index))
	})
	
	showStyles(h1, h2, itemStylesArray.join(' '))
}


const colorShuffle = () => {
	h1 = getRandomInt(0, 361)
	h2 = getRandomInt(h1 + 30, h1 + 90)
	$grid.style.setProperty('--h1', h1)
	$grid.style.setProperty('--h2', h2)
	showStyles(h1, h2, itemStylesArray.join(' '))
}


const copyToClipboard = () => {
	const range = document.createRange()
	range.selectNode($codeBlock)
	window.getSelection().addRange(range)
	
	const btnWidth = $copy.getBoundingClientRect().width
	
	try {
		const success = document.execCommand('copy')
		const msg = success ? 'Copied' : 'Unsuccessful'
		$copy.style.width = `${btnWidth}px`
		$copy.innerText = msg
		$copy.classList.add('is-copied')
		console.log(msg)
	} catch(err) {
		console.log('A problem occurred')
	}
	
	window.getSelection().removeAllRanges()
	
	setTimeout(() => {
		$copy.classList.remove('is-copied')
		$copy.innerText = 'Copy CSS to clipboard'
		$copy.style.width = 'auto'
	}, 3000)
}

generateLayout()

$btn.addEventListener('click', generateLayout)

$color.addEventListener('click', colorShuffle)

$copy.addEventListener('click', copyToClipboard)

// Close sidebar
let open = true

$fw.addEventListener('click', () => {
	if (open) {
		$wrapper.classList.add('is-closed')
		$fw.innerText = 'Revert'
		open = false
	} else {
		$wrapper.classList.remove('is-closed')
		$fw.innerText = 'Show full width grid'
		open = true
	}
})