<header class="kb-header kb-state-main">
	<div class="kb-row">
		<div class="kb-col head-info">
			<div class="header-img">
				<svg class="kb-icon">
					<use href="#kb-redes-big-avatar"></use>
				</svg>
			</div>
			<h3 class="heading">Чат-бот VMK GROUP</h3>
		</div>

		<div class="kb-col chat-control-btns">
			<div class="kb-row">
				<div class="kb-col do-rate">
					<button class="like">
						<svg class="kb-icon" width="24" height="24">
							<use href="#kb-like"></use>
						</svg>
					</button>

					<button class="dislike">
						<svg class="kb-icon" width="24" height="24">
							<use href="#kb-dislike"></use>
						</svg>
					</button>
				</div>

				<div class="kb-col">
					<button class="clear kb-chat-clear">
						<svg class="kb-icon" width="24" height="24">
							<use href="#kb-trash"></use>
						</svg>
					</button>
				</div>
			</div>
		</div>
	</div>
</header>

<script>
	document.addEventListener("DOMContentLoaded", e => {
		const chat = document.querySelector(".chat-container");
		const header = document.querySelector(".kb-header");

		setInterval(() => {
			if(chat.querySelectorAll(".message.user").length) {
				if(!header.classList.contains("kb-state-compact")) {
					header.classList.remove("kb-state-main");
					header.classList.add("kb-state-compact");
				}
			} else {
				if(!header.classList.contains("kb-state-main")) {
					header.classList.remove("kb-state-compact");
					header.classList.add("kb-state-main");
				}
			}
		}, 100);

		document.querySelector(".kb-chat-clear").addEventListener("click", e => {
			let els = document.querySelectorAll(".chat-container > div");
			for(let i=0; i<els.length; i++) {
				els[i].remove();
			}

			resetChat();

			const msgid = makeAssistantMsg();
			sendMessages(
				msgid,
				prepareUserMessage("/start"), 
				function(resp, msgid){
					if(resp["status"] != "done") {
						return;
					}
					
					let content = marked.parse(resp["content"]).trim();
					updateMsgContent(msgid, content);
					const freqAsks = specialViewMap.frequentlyAsked({
						questions: [
							"Партнерство",
							"Освіта",
							"Статус замовлень",
							"Акції/промо",
						]
					});
					document.querySelector(".chat-container").appendChild(freqAsks);
					scrollMsgsContainerDown();
					updateMsgHistory();
				}
			);
		});

		document.querySelector(".chat-control-btns .like").addEventListener("click", e => {
			const channel_name = "kitan_bot_" + getChatId();

			doAction("logs.rating", {
				"channel_name": channel_name,
				"rating": 1
			}, resp => {});

			localStorage.setItem("user_rating", 1);
			e.currentTarget.classList.add("active");
			document.querySelector(".chat-control-btns .dislike").classList.remove("active");
		});

		document.querySelector(".chat-control-btns .dislike").addEventListener("click", e => {
			const channel_name = "kitan_bot_" + getChatId();

			doAction("logs.rating", {
				"channel_name": channel_name,
				"rating": -1
			}, resp => {});
			
			localStorage.setItem("user_rating", -1);
			e.currentTarget.classList.add("active");
			document.querySelector(".chat-control-btns .like").classList.remove("active");
		});

		if(localStorage.getItem("user_rating") === "1") {
			document.querySelector(".chat-control-btns .like").classList.add("active");
		} else if(localStorage.getItem("user_rating") === "-1") {
			document.querySelector(".chat-control-btns .dislike").classList.add("active");
		}
	});
</script>