<template>
		
	
	<div :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
		<div class="ui basic segment">
		<div class="ui grid">

			<div class="ui sixteen wide center aligned column">
				<div class="ui fluid button" v-on:click="clearStyles">
					<i class="refresh icon"></i>
					Clear All Styles
				</div>
			</div>

			<div class="row">
				<div class="sixteen wide column">
					<br>
					<p>Note Color</p>
					<div v-for="color in colors" 
						class="color-button" 
						:style="{ backgroundColor:color }"
						v-on:click="chosenColor(color)"
					></div>
				</div>
			</div>

			<div class="row">
				<div class="sixteen wide column">
					<p>Note Icon
						<span v-if="allStyles.noteIcon" >
							<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
						</span>
					</p>
					<div v-for="icon in icons" class="icon-button" v-on:click="chosenIcon(icon)" >
						<i :class="`large ${icon} icon`" :style="{ 'color':allStyles.iconColor }"></i>		
					</div>
				</div>
			</div>

			<div class="row">
				<div class="sixteen wide column">
					<p>Icon Color</p>
					<div v-for="color in getReducedColors()" 
						class="color-button" 
						:style="{ backgroundColor:color }"
						v-on:click="chooseIconColor(color)"
					>
					</div>
				</div>
			</div>
		</div>
		</div>
		
	</div>

</template>

<script>

	export default {
		name: 'ColorPicker',
		props: [ 'location', 'styleObject' ],
		data () {
			return {
				allStyles:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
				blankStyle:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
				colors: [null,
				'rgb(67,67,67)','rgb(102,102,102)','rgb(153,153,153)','rgb(183,183,183)','rgb(204,204,204)','rgb(217,217,217)','rgb(239,239,239)','rgb(243,243,243)','rgb(255,255,255)','rgb(152,0,0)','rgb(255,0,0)','rgb(255,153,0)','rgb(255,255,0)','rgb(0,255,0)','rgb(0,255,255)','rgb(74,134,232)','rgb(0,0,255)','rgb(153,0,255)','rgb(255,0,255)','rgb(230,184,175)','rgb(244,204,204)','rgb(252,229,205)','rgb(255,242,204)','rgb(217,234,211)','rgb(208,224,227)','rgb(201,218,248)','rgb(207,226,243)','rgb(217,210,233)','rgb(234,209,220)','rgb(221,126,107)','rgb(234,153,153)','rgb(249,203,156)','rgb(255,229,153)','rgb(182,215,168)','rgb(162,196,201)','rgb(164,194,244)','rgb(159,197,232)','rgb(180,167,214)','rgb(213,166,189)','rgb(204,65,37)','rgb(224,102,102)','rgb(246,178,107)','rgb(255,217,102)','rgb(147,196,125)','rgb(118,165,175)','rgb(109,158,235)','rgb(111,168,220)','rgb(142,124,195)','rgb(194,123,160)','rgb(166,28,0)','rgb(204,0,0)','rgb(230,145,56)','rgb(241,194,50)','rgb(106,168,79)','rgb(69,129,142)','rgb(60,120,216)','rgb(61,133,198)','rgb(103,78,167)','rgb(166,77,121)','rgb(133,32,12)','rgb(153,0,0)','rgb(180,95,6)','rgb(191,144,0)','rgb(56,118,29)','rgb(19,79,92)','rgb(17,85,204)','rgb(11,83,148)','rgb(53,28,117)','rgb(116,27,71)','rgb(91,15,0)','rgb(102,0,0)','rgb(120,63,4)','rgb(127,96,0)','rgb(39,78,19)','rgb(12,52,61)','rgb(28,69,135)','rgb(7,55,99)','rgb(32,18,77)','rgb(76,17,48)'],
				icons: ['cat','crow','dog','dove','dragon','feather','feather alternate','fish','frog','hippo','horse','horse head','kiwi bird','otter','paw','spider','video','headphones','motorcycle','truck','monster truck','campground','cloud sun','drumstick bite','football ball','fruit-apple','hiking','mountain','tractor','tree','wind','wine bottle','coffee','flask','glass cheers','glass martini','beer','toilet paper','gift','globe','hand holding heart','comment','graduation cap','hat cowboy','hat wizard','mitten','user tie','laptop code','microchip','shield alternate','mouse','plug','power off','satellite','hammer','wrench','bell','eye','marker','paperclip','atom','award','theater masks','music','grin alternate','grin tongue squint outline','laugh wink','fire','fire alternate','poop','sun','money bill alternate','piggy bank','heart outline','heartbeat','running','walking','bacon','bone','bread slice','candy cane','carrot','cheese','cloud meatball','cookie','egg','hamburger','hotdog','ice cream','lemon','lemon outline','pepper hot','pizza slice','seedling','stroopwafel','leaf','book dead','broom','cloud moon','ghost','mask','skull crossbones','certificate','check','check circle','joint','cannabis','bong','gem','futbol','brain','dna','hand spock','hand spock outline','meteor','moon','moon outline','robot','rocket','satellite dish','space shuttle','user astronaut','fingerprint','thumbs up','thumbs down']
			}
		},
		watch:{
			styleObject: function(updatedStyles){
				this.allStyles = updatedStyles
			}
		},
		mounted(){
			this.allStyles = this.styleObject
		},
		methods: {
			getReducedColors(){

				let reduced = []

				this.colors.forEach((color,i) => {
					if(i < 20 || i > 69){
						reduced.push(color)
					}
				})

				return reduced
			},
			clearStyles(){
				this.$emit('changeColor', this.blankStyle)
			},
			closeThisBitch(){
				this.$emit('close')
			},
			chosenColor(inColor){

				//Set not background to color that was chosen
				this.allStyles.noteBackground = inColor

				if(inColor == null){
					this.$emit('changeColor', this.allStyles)
					return
				}

				//Automatically select note text color

				//If you are using hex colors, use this
				// Convert hex color to RGB - http://gist.github.com/983661
		        // let color = +("0x" + inColor.slice(1).replace(inColor.length < 5 && /./g, '$&$&'));
		        // let r = color >> 16;
		        // let g = color >> 8 & 255;
		        // let b = color & 255;

		        const set = inColor.match(/\d+/g)
		        const r = parseInt(set[0])
		        const g = parseInt(set[1])
		        const b = parseInt(set[2])

		        //Convert RGB to HSP
				const hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) );
				
				//If it has a BG color, default to sold black text
				this.allStyles.noteText = '#000' 
				if(hsp < 127.5){
					this.allStyles.noteText = '#FFF' //If color is dark, we need brighter text
				}

				this.$emit('changeColor', this.allStyles)
			},
			chosenIcon(inIcon){

				this.allStyles.noteIcon = inIcon

				this.$emit('changeColor', this.allStyles)
			},
			chooseIconColor(inColor){

				this.allStyles.iconColor = inColor

				this.$emit('changeColor', this.allStyles)
			}
		}
	}
</script>
<style type="text/css" scoped>
	.icon-button {
		height: 40px;
		width: calc(10% - 7px);
		display: inline-block;
		cursor: pointer;
		font-size: 1.3em;
	}
	.color-button {
		display: inline-block;
		width: calc(10% - 7px);
		height: 30px;
		border-radius: 30px;
		box-shadow: 0px 1px 3px 0px #3e3e3e;
		margin: 7px 7px 0 0;
		cursor: pointer;
	}
</style>