import { PageText } from "./types";
// import { data, refresh } from "./data"
import data from "../typo/output.js"

import glitch from './glitch'

import Quests from './quests'

export default class Page {

	private vars: object = {}

	private container: HTMLElement | null

	private debug = false

	constructor() {
		this.container = document.querySelector('.content')

		if (this.container) {
			this.container.addEventListener('click', ev => this.handleClick(ev.target))
		}

		this.load('home_start') // home_start

		if (this.debug) {
			this.initDebug()
		}
	}

	initDebug() {
		const keys = Object.keys(data)

		const debugContainer = document.createElement('div')
		debugContainer.classList.add('debug')
		document.body.appendChild(debugContainer)

		const selector = document.createElement('select')
		selector.id = 'debug_page'
		selector.innerHTML = keys.map(opt => {
			return `<option value="${opt}">${opt}</option>`
		}).join('')
		debugContainer.appendChild(selector)

		selector.addEventListener('change', () => {
			const index = selector.selectedIndex
			this.load(keys[index])
		})

		const updateBtn = document.createElement('button')
		updateBtn.innerHTML = 'update'
		updateBtn.addEventListener('click', () => {
			// refresh()

			const index = selector.selectedIndex
			this.load(keys[index])
		})
		debugContainer.appendChild(updateBtn)
	}

	public load(name: string) {
		const text: PageText = data[name]
		if (text.quest) {
			this.showQuest(text.quest.name, text.quest.exit)
		} else {
			const output = text.text
				.filter(item => (item.conditions || []).every(_ => !!this.vars[_.prop] === !!_.value))
				.map(item => this.processLinks(item.value))
				.join('')

			this.setText(output)
		}

		glitch(text.bg ? `back/${text.bg}.webp` : '')

		if (text.actions) {
			text.actions.forEach(action => {
				this.vars[action.prop] = action.value
			})
		}
	}

	public setText(text: string) {
		if (this.container) {
			this.container.innerHTML = '<div>' + text + '</div>'

			const sides = document.querySelector('.sides') as HTMLElement
			if (sides) {
				sides.addEventListener('mousemove', ev => {
					const p = 100 - (((ev.layerX + 1) / 600 * 100) | 0) + '%'
					sides.style.setProperty('--position', p)
				})
			}
		}
	}

	public processLinks(text) {
		return text
			.replace(/\n/g, '<br>')
			.replace(/\[a (.*?)\](.*?)\[\/a\]/gm, '<span dest="$1">$2</span>')
			.replace(/\[g\](.*?)\[\/g\]/gm, '<span name>$1</span>')
			.replace(/\[r\](.*?)\[\/r\]/gm, '<span reply>$1</span>')
	}

	public handleClick(target) {
		const dest = target.getAttribute('dest')
		if (dest) {
			this.load(dest)

			if (this.debug) {
				const select = document.getElementById('debug_page') as HTMLSelectElement
				select.selectedIndex = Object.keys(data).indexOf(dest)
			}
		}
	}

	public showQuest(questName: string, next: string) {
		if (!this.container) return
		this.container.innerHTML = ''

		const Quest = Quests[questName]
		if (Quest) {
			const quest = new Quest()
			quest.init(this.vars)
			Quests.run(quest, this.container, () => this.load(next))
		}
	}
}
