const linearScaleEl = document.querySelector('[data-scale="linear"]')
const divergingScaleEl = document.querySelector('[data-scale="diverging"]')
const thresholdScaleEl = document.querySelector('[data-scale="threshold"]')


const defaults = {
	colorRange: ['royalblue', 'pink'],
	positions: [0, 50, 100],
	scaleType: 'linear',
}

class ColorScale {
	constructor(el, opts) {
		this.el = d3.select(el)
		this.options = { ...defaults, ...opts }
		this.positions = this.options.positions
		this.colorRange = this.options.colorRange
		this.isDragging = false
		this.scaleType = this.el.node().dataset.scale
		
		this.setBgGradient()
		this.addMarkers()
	}
	
	get domainThreshold() {
		const step = 100 / this.colorRange.length
		return this.colorRange.map((color, i) => {
			return (i + 1) * step
		})
	}
	
	get domainLinear() {
		if (this.colorRange.length === 2) {
			return [0, 100]
		}
		
		const step = 100 / this.colorRange.length
		return this.colorRange.map((color, i) => {
			return i * step
		})
	}
	
	get colorScaleLinear() {
		return d3.scaleLinear()
			.domain(this.domainLinear)
			.range(this.colorRange)
			.clamp(true)
	}
	
	get colorScaleDiverging() {
		const domain = [0, 50, 100]
		
		return d3.scaleDiverging()
			.domain(domain)
			.range(this.colorRange)
			.clamp(true)
	}
	
	get colorScaleThreshold() {
		return d3.scaleThreshold()
			.domain(this.domainThreshold)
			.range(this.colorRange)
	}
	
	get colorScaleFn() {
		if (this.scaleType === 'diverging') {
			return this.colorScaleDiverging
		}
		
		if (this.scaleType === 'threshold') {
			return this.colorScaleThreshold
		}
		
		return this.colorScaleLinear
	}
	
	get scalePosition() {
		return d3.scaleLinear()
			.domain([0, this.el.node().clientWidth])
			.range([0, 100])
			.clamp(true)
	}
	
	setBgGradient() {
		let stops = this.colorRange.join(',')
		
		if (this.scaleType === 'threshold') {
			const step = 100 / this.colorRange.length
			stops = this.colorRange.map((color, i) => {
				const stop = ((i + 1) * step)
				return `${color} 0, ${color} ${stop}%`
			}).join(',')
		}
		
		this.el.style('background', `linear-gradient(
			to right, ${stops})`)
	}
	
	createMarker(position) {
		const marker = this.el.append('div')
			.attr('class', 'marker')
			.style('left', `${position}%`)
		
		const positionText = marker.append('p')
			.text(`${position}%`)
		
		const colorSpot = marker.append('div')
			.attr('class', 'marker__color')
			.style('background-color', `${this.colorScaleFn(position)}`)
		
		const scaleText = marker.append('code')
			.html(`colorScale(${position})<br/>${this.colorScaleFn(position)}`)
		
		marker.on('mousedown touchstart', () => {
			this.isDragging = true
			marker.style('z-index', 2)
		}).on('mouseup touchend', () => {
			this.isDragging = false
			marker.style('z-index', 1)
		}).on('mousemove touchmove', (e) => {
			if (!this.isDragging) return
			
			const [posX, posY] = d3.pointer(e, this.el)
			const elPosX = this.el.node().getBoundingClientRect().left
			const percentage = this.scalePosition(posX - elPosX).toFixed(0)
			const color = this.colorScaleFn(percentage)
			
			marker.style('left', `${percentage}%`)
			positionText.text(`${percentage}%`)
			colorSpot.style('background-color', `${color}`)
			scaleText.html(`scale(${percentage})<br/>${color}`)
		})
	}
	
	addMarkers() {
		this.positions.forEach((position) => this.createMarker(position))
	}
	
	colorSwatch(el) {
		d3.select(el).style('background-color', this.colorScaleFn(200))
	}
}

const simpleLinearPalette = ['royalblue', 'pink']
const fiveColorPalette = ['royalblue', 'lightblue', 'aliceblue', 'lavender', 'pink']

const linearScaleVisualiser = new ColorScale(linearScaleEl, {
	colorRange: simpleLinearPalette
})

const divergingScaleVisualiser = new ColorScale(divergingScaleEl, {
	colorRange: ['royalblue', 'lightblue', 'mediumpurple']
})

const thresholdScaleVisualiser = new ColorScale(thresholdScaleEl, {
	colorRange: ['royalblue', 'lightblue', 'aliceblue', 'lavender', 'mediumpurple']
})