const SquireButtonFunctions = {
	data(){
		return {
			//active button states
            activeBold: false,
            activeItalics: false,
            activeUnderline: false,
            activeTitle: false,
            activeList: false,
            activeToDo: false,
            activeColor: null,
            activeCode: false,
            activeSubTitle: false,
            //
            lastUsedColor: null,
		}
	},
	methods: {
		//
		// Inside squire init function
		//

		pathChangeEvent(e){

			//Reset all button states
			this.activeBold = false
			this.activeTitle = false
			this.activeItalics = false
			this.activeList = false
			this.activeToDo = false
			this.activeColor = null
			this.activeUnderline = false
			this.activeCode = false
            this.activeSubTitle = false

			if(e.path.indexOf('>U>') > -1 || e.path.search(/U$/) > -1){
				this.activeUnderline = true
			}
			if(e.path.indexOf('>B>') > -1 || e.path.search(/B$/) > -1){
				this.activeBold = true
			}
			if(e.path.indexOf('>I') > -1){
				this.activeItalics = true
			}
			if(e.path.indexOf('fontSize=1.4em') > -1){
				this.activeTitle = true
			}
			if(e.path.indexOf('fontSize=0.9em') > -1){
				this.activeSubTitle = true
			}
			if(e.path.indexOf('OL>LI') > -1){
				this.activeList = true
			}
			if(e.path.indexOf('UL>LI') > -1){
				this.activeToDo = true
			}
			if(e.path.indexOf('CODE') > -1){
				this.activeCode= true
			}
			const colorIndex = e.path.indexOf('color=')
			if(colorIndex > -1){
				//Get all digigs after color index, then limit to 3
				let colors = e.path.substring(colorIndex).match(/\d+/g).slice(0,3)
				
				const lastColor = `rgb(${colors.join(',')})`
				this.activeColor = lastColor
				this.lastUsedColor = lastColor
			}
		},

		//
		//Inside Squire Init
		//

		removeFormatting(){
			this.selectLineIfNoSelect()
			this.editor.removeAllFormatting()
		},
		//If nothing is selected, select the entire line
		selectLineIfNoSelect(){

			//Select entire line if range is not set 
			let selection = this.editor.getSelection()

			if(selection.startOffset == selection.endOffset && selection.startContainer == selection.endContainer){

				let squireRange = this.editor.createRange(
					selection.startContainer, 0, 
					selection.endContainer, selection.commonAncestorContainer.textContent.length)

				this.editor.setSelection(squireRange)
			}
		},
		modifyFont(inSize){

			this.selectLineIfNoSelect()

			let fontInfo = this.editor.getFontInfo()
			//Toggle font size between large and normal
			if(fontInfo.size){
				this.editor.setFontSize(null)
			} else {
				this.editor.setFontSize(inSize)
			}
		},
		modifyColor(color){

			this.selectLineIfNoSelect()
			//Set color of font
			this.editor.setTextColour(color)

			this.lastUsedColor = color
		},
		applyLastUsedColor(){
			this.modifyColor(this.lastUsedColor)
		},
		toggleList(type){

			//Undo list if its already a lits
			if(this.editor.hasFormat(type)){
				this.editor.removeList()
				return
			}

			if(type == 'ol'){
				this.editor.makeOrderedList()
			}
			if(type == 'ul'){
				this.editor.makeUnorderedList()
			}
		},
		toggleUnderline(){
			this.selectLineIfNoSelect()
			if( this.editor.hasFormat('u') ){
				this.editor.removeUnderline()
			} else {
				this.editor.underline()
			}
		},
		toggleBold(){
			this.selectLineIfNoSelect()
			if( this.editor.hasFormat('b') ){
				this.editor.removeBold()
			} else {
				this.editor.bold()
			}
		},
		toggleItalic(){
			this.selectLineIfNoSelect()
			if( this.editor.hasFormat('i') ){
				this.editor.removeItalic()
			} else {
				this.editor.italic()
			}
		},
		modifyCode(){

			this.selectLineIfNoSelect()

			this.editor.toggleCode()
		},
		undoCustom(){
			//The same as pressing CTRL + Z 
			// this.editor.focus()
			// document.execCommand("undo", false, null)
			this.editor.undo()
		},
		uncheckAllListItems(){
			//
			// Uncheck All List Items
			//

			//Fetch the container
			let container = document.getElementById('squire-id')

			Array.from( container.getElementsByClassName('active') ).forEach(item => {
				item.classList.remove('active');
			})

			//Close menu if user is on mobile, then sort list
			if(this.$store.getters.getIsUserOnMobile){
				this.$router.go(-1)
			}
		},
		deleteCompletedListItems(){
			//
			// Delete Completed List Items
			//

			//Fetch the container
			let container = document.getElementById('squire-id')

			//Go through each item, on first level, look for Unordered Lists
			container.childNodes.forEach( (node) => {
				if(node.nodeName == 'UL'){

					//Create two categories, done and not done list items
					let undoneElements = document.createDocumentFragment()

					//Go through each item in each list we found
					node.childNodes.forEach( (checkListItem, index) => {

						//Skip Embedded lists, they are handled with the list item above them. Keep lists with intented items together
						if(checkListItem.nodeName == 'UL'){
							return
						}

						//Check if list item has active class
						const checkedItem = checkListItem.classList.contains('active')

						//Check if the next item is a list, Keep lists with intented items together
						let sublist = null
						if(node.childNodes[index+1] && node.childNodes[index+1].nodeName == 'UL'){
							sublist = node.childNodes[index+1]
						}

						//Push checked items and their sub lists to the done set
						if(!checkedItem){

							undoneElements.appendChild( checkListItem.cloneNode(true) )
							if(sublist){
								undoneElements.appendChild( sublist.cloneNode(true) )
							}

						}

					})

					//Remove all HTML from node, push unfinished items, then finished below them
					node.innerHTML = null
					node.appendChild(undoneElements)
					
				}
			})

			//Close menu if user is on mobile, then sort list
			if(this.$store.getters.getIsUserOnMobile){
				this.$router.go(-1)
			}
		},
		sortList(){
			//
			// Sort list, checked at the bottom, unchecked at the top
			//

			//Fetch the container
			let container = document.getElementById('squire-id')

			//Go through each item, on first level, look for Unordered Lists
			container.childNodes.forEach( (node) => {
				if(node.nodeName == 'UL'){

					//Create two categories, done and not done list items
					let doneElements = document.createDocumentFragment()
					let undoneElements = document.createDocumentFragment()

					//Go through each item in each list we found
					node.childNodes.forEach( (checkListItem, index) => {

						//Skip Embedded lists, they are handled with the list item above them. Keep lists with intented items together
						if(checkListItem.nodeName == 'UL'){
							return
						}

						//Check if list item has active class
						const checkedItem = checkListItem.classList.contains('active')

						//Check if the next item is a list, Keep lists with intented items together
						let sublist = null
						if(node.childNodes[index+1] && node.childNodes[index+1].nodeName == 'UL'){
							sublist = node.childNodes[index+1]
						}

						//Push checked items and their sub lists to the done set
						if(checkedItem){

							doneElements.appendChild( checkListItem.cloneNode(true) )
							if(sublist){
								doneElements.appendChild( sublist.cloneNode(true) )
							}

						} else {

							undoneElements.appendChild( checkListItem.cloneNode(true) )
							if(sublist){
								undoneElements.appendChild( sublist.cloneNode(true) )
							}
						}

					})

					//Remove all HTML from node, push unfinished items, then finished below them
					node.innerHTML = null
					node.appendChild(undoneElements)
					node.appendChild(doneElements)
					
				}
			})

			//Close menu if user is on mobile
			if(this.$store.getters.getIsUserOnMobile){
				this.$router.go(-1)
			}
		},
		calculateMath(){
			//
			// Find math in note and calculate the outcome
			//

			//Fetch the container
			let container = document.getElementById('squire-id')

			// simple function that trys to evaluate javascript
			const shittyMath = (string) => {
				//Remove all chars but math chars
				const cleanString = String(string).replace(/[a-zA-Z\s]*/g,'')
				try {
					return Function('"use strict"; return (' + cleanString + ')')();
				} catch (error) {
					console.log('Math Error: ', string)
					return null
				}
			}

			//Go through each item, on first level, look for Unordered Lists
			container.childNodes.forEach( (node) => {

				const line = node.innerText.trim()

				// = sign exists and its the last character in the string
				if(line.indexOf('=') != -1 && (line.length-1) == line.indexOf('=')){

					//Pull out everything before the formula and try to evaluate it
					const formula = line.split('=').shift()
					const output = shittyMath(formula)

					//If its a number and didn't throw an error, update the line
					if(!isNaN(output) && output != null){

						//Since there is HTML in the line, splice in the number after the = sign
						let equalLocation = node.innerHTML.indexOf('=')
						let newLine = node.innerHTML.slice(0, equalLocation+1).trim()
						newLine += ` ${output}`
						newLine += node.innerHTML.slice(equalLocation+1).trim()

						//Slam in that new HTML with the output
						node.innerHTML = newLine
					}
				}
				
			})

			//Close menu if user is on mobile, then sort list
			if(this.$store.getters.getIsUserOnMobile){
				this.$router.go(-1)
			}
		},
		setText(inText){

			this.editor.setHTML(inText)
			// this.noteText = this.editor._getHTML()
			// this.diffNoteText = this.editor._getHTML()
		},
		getText(){

			return this.editor.getHTML()
		},
		insertDivide(){

			this.editor.insertHTML(`<p><div class='divide'></div><br></p>`) 
			this.editor.focus()
			this.editor.moveCursorToEnd()
		},
		insertTable(tall, wide){
			console.log(`Table: ${wide} x ${tall}`)

			//Insert a table
			let tableSyntax = '<div>'
			tableSyntax += '<table>'
			for (let i = 0; i < tall; i++) {
				tableSyntax += '<tr>'
				for (let j = 0; j < wide; j++) {
					tableSyntax += '<td><p><br></p></td>'
				}
				tableSyntax += '</tr>'
			}
			tableSyntax += '</table></div><p><br></p>'

			this.editor.insertHTML(tableSyntax) 
			this.editor.focus()
			this.editor.moveCursorToEnd()

			this.$router.go(-1)
		},
	},
}

export default SquireButtonFunctions