import angular, { sanitize } from 'angular'
import { Inject, Injectable } from '../decorators'

// text editor requires sanitization but also needs to allow for style attributes which are removed by default
angular.module('app').config(['$sanitizeProvider', ($sanitizeProvider: ng.sanitize.ISanitizeProvider) => {
	$sanitizeProvider.addValidAttrs(['style'])

	// Quill uses data-list to distinguish bulleted lists from numbered lists (they are both provided as <ol>)
	$sanitizeProvider.addValidAttrs(['data-list'])

	// Allow target attribute on anchor tags
	$sanitizeProvider.addValidAttrs(['target'])
}])

@Injectable('richTextService')
export default class RichTextService {

	constructor(
		@Inject('$sanitize') private $sanitize: sanitize.ISanitizeService,
	) { }

	/** Older versions of Quill rendered some things differently. Patch those up. */
	backwardsCompatibleHtml(html: string): string {

		html = this.removeZeroWidthNoBreakSpaces(html)
		html = this.removeCursor(html)
		html = this.fixWrappingCursor(html)
		html = this.fixFontTags(html)
		html = this.fixBulletPoints(html)
		html = this.fixStrongBold(html)

		return html
	}

	/**
	 * Transform <ul><li> into <ol><li data-list="bullet">,
	 * and <ol><li> into <ol><li data-list="ordered">
	 * accounting for any pattern of nested <ul> and <ol> tags.
	 */
	fixBulletPoints(html: string): string {

		if (!html) {
			return html
		}

		let newHtml: string = ''

		// Regexes for these, in case someone invents a <link> tag or something
		const olStartTagRegex = new RegExp(`<ol(\\s|>)`)
		const ulStartTagRegex = new RegExp(`<ul(\\s|>)`)
		const liStartTagRegex = new RegExp(`<li(\\s|>)`)
		// Literal string matches for these
		const olEndTag = `</ol>`
		const ulEndTag = `</ul>`

		// Stack of <ol> and <ul> tags, representing how the lists are nested
		const listStack: string[] = []

		let parsedLength = 0
		let currentListType: string | undefined

		// Loop through the input html, looking for <ol>, <ul> and <li> tags. Maintain a stack of nested lists, so
		// we can transform the current <li> correctly.
		while (parsedLength < html.length) {

			// Find the start of the next <ol>, <ul> or <li> tag
			const olStart = this.indexOfRegex(html, olStartTagRegex, parsedLength)
			const ulStart = this.indexOfRegex(html, ulStartTagRegex, parsedLength)
			const liStart = this.indexOfRegex(html, liStartTagRegex, parsedLength)

			// Find what might be the end of the current list (or might be the end of a nested list)
			let nextListEnd: number
			switch (currentListType) {
				case 'ol':
					nextListEnd = html.indexOf(olEndTag, parsedLength)
					break
				case 'ul':
					nextListEnd = html.indexOf(ulEndTag, parsedLength)
					break
				default:
					nextListEnd = -1
					break
			}

			// Find which tag comes next
			const nextItemPos = Math.min(
				olStart === -1 ? html.length : olStart,
				ulStart === -1 ? html.length : ulStart,
				liStart === -1 ? html.length : liStart,
				nextListEnd === -1 ? html.length : nextListEnd)

			newHtml += html.substring(parsedLength, nextItemPos)
			parsedLength = nextItemPos

			switch (nextItemPos) {
				case olStart:
				case ulStart:
					// We've found the start of a list
					newHtml += `<ol>`

					const listTagEnd = html.indexOf('>', nextItemPos)
					if (listTagEnd === -1) {
						// Invalid HTML. Dump the lot.
						return ''
					}
					parsedLength = listTagEnd + 1

					if (nextItemPos === olStart) {
						listStack.push('ol')
						currentListType = 'ol'
					} else {
						listStack.push('ul')
						currentListType = 'ul'
					}
					break

				case liStart:
					// We've found a list item
					if (!currentListType) {
						// Invalid HTML. Dump the lot.
						return ''
					}

					const liTagEnd = html.indexOf('>', liStart + 1)
					if (liTagEnd === -1) {
						// Invalid HTML. Dump the lot.
						return ''
					}
					let liTag = html.substring(liStart, liTagEnd + 1)

					if (liTag.indexOf('data-list') === -1) {
						const dataAttr = ` data-list="${currentListType === 'ol' ? 'ordered' : 'bullet'}"`
						liTag = `<li${dataAttr}` + liTag.substring(3)
					}

					newHtml += liTag
					parsedLength = liTagEnd + 1
					break

				case nextListEnd:
					// We've reached the end of the current list. Write out the closing tag and pop the stack
					newHtml += olEndTag
					parsedLength = nextListEnd + olEndTag.length
					listStack.pop()
					currentListType = listStack[listStack.length - 1]
					break
			}
		}

		if (listStack.length > 0) {
			// We didn't close the last list. Invalid HTML. Dump the lot.
			return ''
		}

		return newHtml
	}

	/**
	 * Transform <font> tags from the old Quill editor into <span> tags, as used by the new editor.
	 * Quill used to set fonts using <font color="#000000" face="Open Sans">
	 * Now it uses <span style="font-family: &#34;Open Sans&#34;; color: rgb(0, 0, 0);">
	 * Although the former still renders correctly, it is skipped for editor.getText(), so it might report that the text editor is empty.
	 */
	fixFontTags(html: string): string {

		if (!html) {
			return html
		}

		let fontTagPos = html.indexOf('<font')
		while (fontTagPos > -1) {
			const fontTagLength = html.indexOf('>', fontTagPos) - fontTagPos + 1
			const fontTag = html.substr(fontTagPos, fontTagLength)

			const faceMatch = fontTag.match(/face="([^"]+)"/)
			const colorMatch = fontTag.match(/color="([^"]+)"/)

			const styles: string[] = []
			if (faceMatch) {
				styles.push(`font-family: &#34;${faceMatch[1]}&#34;;`)
			}
			if (colorMatch) {
				styles.push(`color: ${colorMatch[1]};`)
			}

			html =
				html.substr(0, fontTagPos) +
				`<span style="${styles.join(' ')}">` +
				html.substr(fontTagPos + fontTagLength)

			fontTagPos = html.indexOf('<font')
		}

		html = html.replace(/<\/font>/g, '<\/span>')

		return html
	}

	/**
	 * Quill adds its own editor cursor to its HTML: <span class="ql-cursor">|</span>
	 * These days we remove that on save, but sometimes it's present in the HTML that was saved by an older version of the editor.
	 * In rare cases, the HTML wraps that span around actual content. This function fixes that.
	 */
	fixWrappingCursor(html: string): string {

		if (!html) {
			return html
		}

		// Regexes can't save us because the cursor span may contain other spans, like this:
		// <p><span class="ql-cursor"><span style="font-size: 24px;">Yikes!</span></span></p>
		// We want to remove the outer span, while preserving the inner span.
		const cursorStartTag = `<span class="ql-cursor">`
		const spanStartTag = `<span`
		const spanEndTag = `</span>`
		let cursorStart = html.indexOf(cursorStartTag)
		while (cursorStart > -1) {

			let currentPos = cursorStart
			let spanDepth = 1
			while (spanDepth > 0) {
				const nextSpanStart = html.indexOf(spanStartTag, currentPos + 1)
				const nextSpanEnd = html.indexOf(spanEndTag, currentPos + 1)
				if (nextSpanStart === -1 && nextSpanEnd === -1) {
					// Spans aren't closed properly, so we have invalid html. Dump the lot. (Should never happen.)
					html = ''
					spanDepth = 0
				} else if (nextSpanStart > -1 && nextSpanStart < nextSpanEnd) {
					// We've found another nested span
					spanDepth++
					currentPos = nextSpanStart
				} else {
					// We've found the end of our current span
					spanDepth--
					currentPos = nextSpanEnd
				}
			}

			if (html !== '') {
				const cursorEnd = currentPos + spanEndTag.length - 1
				const cursorOuterLength = cursorEnd - cursorStart + 1
				const cursorInnerLength = cursorOuterLength - cursorStartTag.length - spanEndTag.length
				html =
					html.substr(0, cursorStart) + // Everything before the cursor
					html.substr(cursorStart + cursorStartTag.length, cursorInnerLength) + // Everything inside the cursor
					html.substr(cursorEnd + 1) // Everything after the cursor
			}

			// There might be multiple cursors - even nested cursors - so keep going until there are none left
			cursorStart = html.indexOf(`<span class="ql-cursor">`)
		}

		return html
	}

	/**
	 * To transition to supporting Google font weights, we switched to inline font weights rather than quill's default <strong> tags.
	 * Replace the legacy strong's with regular span's and an inline font weight.
	 */
	fixStrongBold(html: string): string {

		if (!html) { return html }

		const bold = '700'

		// Replace <strong> tags with <span> tags and add font-weight: 700
		html = html.replace(/<strong([^>]*)>/g, (match, attributes) => {
			// Check if there's already a style attribute
			const styleMatch = attributes.match(/style="([^"]*)"/)

			if (styleMatch) {
				// There's already a style attribute, add font-weight to it
				const existingStyles = (styleMatch[1] || '').trim()

				// Check if font-weight is already present
				if (existingStyles.includes('font-weight')) {
					// Ignore existing font-weight
					return `<span${attributes.replace(styleMatch[0], `style="${existingStyles}"`)}>`
				} else {
					// Add font-weight to styles
					const separator = existingStyles.endsWith(';') ? ' ' : '; '
					return `<span${attributes.replace(styleMatch[0], `style="${existingStyles}${separator}font-weight: ${bold};"`)}>`
				}
			} else {
				// No style attribute exists, add one with font-weight
				return `<span${attributes} style="font-weight: ${bold};">`
			}
		})

		// Replace closing tags
		html = html.replace(/<\/strong>/g, '</span>')

		return html
	}

	/** Helper method because regexes can't natively start searching from a given index */
	indexOfRegex(text: string, regex: RegExp, fromIndex: number): number {

		const match = text.substring(fromIndex).match(regex)
		if (!match || match.index === undefined || match.index === -1) {
			return -1
		}
		return fromIndex + match.index
	}

	/** Sometimes Quill's HTML includes its own cursor. We don't want to save that. */
	removeCursor(html: string): string {

		if (!html) {
			return html
		}

		return html.replace(/\<span class="ql-cursor"\>.?\<\/span\>/g, '')
	}

	/** Sometimes Quill adds Zero Width No-Break Spaces. */
	removeZeroWidthNoBreakSpaces(html: string): string {

		if (!html) {
			return html
		}

		return html.replace(/&#xFEFF;/g, '')
	}

	/** Clean up the HTML, ready for save */
	sanitizeHtml(html: string): string {

		html = this.removeZeroWidthNoBreakSpaces(html)
		html = this.removeCursor(html)
		html = this.$sanitize(html)

		return html
	}

}