import {ElemJS, q, ejs} from "./basic.js"
import {store} from "./store/store.js"

class Chat extends ElemJS {
	constructor() {
		super(q("#c-chat"))

		this.removableSubscriptions = []

		store.activeRoom.subscribe("changeSelf", this.changeRoom.bind(this))

		this.render()
	}

	unsubscribe() {
		this.removableSubscriptions.forEach(({name, target, subscription}) => {
			target.unsubscribe(name, subscription)
		})
		this.removableSubscriptions.length = 0
	}

	changeRoom() {
		// disconnect from the previous room
		this.unsubscribe()
		// connect to the new room's timeline updater
		if (store.activeRoom.exists()) {
			const timeline = store.activeRoom.value().timeline
			const subscription = (_, {element, index}) => {
				this.childAt(index, element)
			}
			const name = "addItem"
			this.removableSubscriptions.push({name, target: timeline, subscription})
			timeline.subscribe(name, subscription)
		}
		this.render()
	}

	render() {
		this.clearChildren()
		if (store.activeRoom.exists()) {
			const timeline = store.activeRoom.value().timeline
			for (const group of timeline.getGroupedEvents()) {
				const first = group[0]
				this.child(
					ejs("div").class("c-message-group").child(
						ejs("div").class("c-message-group__avatar").child(
							ejs("div").class("c-message-group__icon")
						),
						ejs("div").class("c-message-group__messages").child(
							ejs("div").class("c-message-group__intro").child(
								ejs("div").class("c-message-group__name").text(first.sender)
							),
							...group.map(event => timeline.elementsMap.get(event.event_id))
						)
					)
				)
			}
		}
	}
}

new Chat()