import { h, Component } from 'preact'
import htm from 'htm'
import { signal } from 'preact/signals'
const html = htm.bind(h)

export class NodeUI extends Component {
	constructor() {//{{{
		super()
		this.node = signal(null)
		window.addEventListener('popstate', evt=>{
			if(evt.state && evt.state.hasOwnProperty('nodeID'))
				this.goToNode(evt.state.nodeID, true)
			else
				this.goToNode(0, true)
		})
	}//}}}
	render() {//{{{
		if(this.node.value === null)
			return

		let node = this.node.value

		let crumbs = [
			html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
		]
	
		crumbs = crumbs.concat(node.Crumbs.slice(1).map(node=>
			html`<div class="crumb" onclick=${()=>this.goToNode(node.ID)}>${node.Name}</div>`
		).reverse())

		let children = node.Children.sort((a,b)=>{
			if(a.Name.toLowerCase() > b.Name.toLowerCase()) return  1;
			if(a.Name.toLowerCase() < b.Name.toLowerCase()) return -1;
			return 0
		}).map(child=>html`
			<div class="child-node" onclick=${()=>this.goToNode(child.ID)}>${child.Name}</div>
		`)

		return html`
			${node.ID > 0 ? html`<div class="crumbs">${crumbs}</crumbs>` : html``}
			<div class="node-name">${node.Name}</div>
			${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
			<div class="node-content">${node.Content}</div>
		`
	}//}}}
	componentDidMount() {//{{{
		let root = new Node(this.props.app, 0)
		root.retrieve(node=>{
			this.node.value = node
		})
	}//}}}
	goToNode(nodeID, dontPush) {//{{{
		if(!dontPush)
			history.pushState({ nodeID }, '', `#${nodeID}`)
		let node = new Node(this.props.app, nodeID)
		node.retrieve(node=>{
			this.node.value = node
		})
	}//}}}
}

class Node {
	constructor(app, nodeID) {//{{{
		this.app      = app
		this.ID       = nodeID
		this.ParentID = 0
		this.UserID   = 0
		this.Name     = ''
		this.Content  = ''
		this.Children = []
		this.Crumbs   = []
	}//}}}

	retrieve(callback) {//{{{
		this.app.request('/node/retrieve', { ID: this.ID })
		.then(res=>{
			this.ParentID = res.Node.ParentID
			this.UserID   = res.Node.UserID
			this.Name     = res.Node.Name
			this.Content  = res.Node.Content
			this.Children = res.Node.Children
			this.Crumbs   = res.Node.Crumbs
			callback(this)
		})
		.catch(this.app.responseError)
	}//}}}
}

// vim: foldmethod=marker