/*=========================================================

	お困りごとドック（追従ヘルプパネル）

	右下の丸ボタンをクリックするとヘルプ導線のパネルが開く。
	マークアップはこのファイルで生成するため、読み込むページ側は
	CSSとJSを読み込むだけでよい。

	読み込み方法（CSSも合わせて読み込むこと）
		<link rel="stylesheet" href="/inc/css/common/helpdock.css">
		<script src="/inc/js/helpdock.js"></script>

	・jQuery非依存（読み込み順を気にしなくてよい）
	・現在の適用範囲：トップページ（/index.html、/sp/index.html）と
	  FAQ（/personal/faq/、/corporate/faq/）、
	  法人IB（/corporate/service/internetbanking/）、
	  スマホアプリ（/personal/service/spappli/）
	・FAQ配下ではパネルを出さず、AIチャットへの直リンクボタンに切り替える

	AIチャットはAIリボーンを利用する。

==========================================================*/

(function () {
	'use strict';

	var AICHAT_URL = '#';
	var CHATBOT_SCRIPT_ID = 'aiRebornEmbedScript';
	var chatbotObserver = null;
	var pendingChatOpen = false;
	var chatbotAlignment = '';

	var CHATBOT_CONFIG = {
		orgId: '69ae1b3b73d046a7f9e01d20',
		chatbotId: '6a0c022d5691b7aabb26bbf1',
		domain: 'https://sotaagents.ai',
		apiUrl: 'https://org-shared-api.sotaagents.ai'
	};

	var LINKS = [
		{
			href: '/personal/faq/',
			label: 'よくあるご質問<br>（個人のお客さま）',
			icon: '<img src="/inc/images/common/helpdock/icon_helpdock_personal.svg" width="26" height="19" alt="">',
			mod: 'c-helpDock__icon--faq'
		},
		{
			href: '/corporate/faq/',
			label: 'よくあるご質問<br>（法人のお客さま）',
			icon: '<img src="/inc/images/common/helpdock/icon_helpdock_corporate.svg" width="26" height="19" alt="">',
			mod: 'c-helpDock__icon--faq c-helpDock__icon--corporate'
		},
		{
			href: AICHAT_URL,
			label: 'AIチャットで質問',
			icon: '<img src="/personal/inc/images/faq/img_faq-aichat-robot.png" width="20" height="25" alt="">',
			mod: 'c-helpDock__icon--chat',
			chat: true
		}
	];

	function adjustChatbotPosition(button) {
		var offset = window.matchMedia('(max-width: 639px)').matches ? '0' : '24px';

		if (!chatbotAlignment) {
			chatbotAlignment = button.style.right ? 'right' : 'left';
		}

		button.style[chatbotAlignment] = offset;
	}

	function hideChatbotDefaultButton(button) {
		var icon = button.querySelector('img');

		if (icon) {
			icon.style.display = 'none';
		}

		button.style.width = '0';
		button.style.height = '0';
		button.style.pointerEvents = 'none';
		button.style.zIndex = '2147483647';
		button.tabIndex = -1;
		adjustChatbotPosition(button);

		window.addEventListener('resize', function () {
			adjustChatbotPosition(button);
		});
	}

	function handleChatbotButton(button) {
		hideChatbotDefaultButton(button);

		if (pendingChatOpen) {
			pendingChatOpen = false;
			button.click();
		}

		if (chatbotObserver) {
			chatbotObserver.disconnect();
			chatbotObserver = null;
		}
	}

	function watchChatbotButton() {
		var button = document.getElementById('bubble-icon-chat');

		if (button) {
			handleChatbotButton(button);
			return;
		}

		if (chatbotObserver) {
			return;
		}

		chatbotObserver = new MutationObserver(function () {
			button = document.getElementById('bubble-icon-chat');
			if (button) {
				handleChatbotButton(button);
			}
		});
		chatbotObserver.observe(document.body, { childList: true, subtree: true });
	}

	function loadChatbot() {
		var script;

		window.embeddedChatbotConfig = CHATBOT_CONFIG;
		watchChatbotButton();

		if (document.getElementById(CHATBOT_SCRIPT_ID)) {
			return;
		}

		script = document.createElement('script');
		script.id = CHATBOT_SCRIPT_ID;
		script.src = 'https://sotaagents.ai/embed.min.js';
		script.async = true;
		document.head.appendChild(script);
	}

	function isChatTrigger(target) {
		while (target && target !== document) {
			if (target.classList &&
				(target.classList.contains('js-aiChatTrigger') ||
				target.classList.contains('p-faqTop__aichatBtn'))) {
				return true;
			}
			target = target.parentNode;
		}
		return false;
	}

	function openChatbot() {
		var button = document.getElementById('bubble-icon-chat');

		if (button) {
			button.click();
			return;
		}

		pendingChatOpen = true;
		watchChatbotButton();
	}

	/* FAQ配下（/personal/faq/・/corporate/faq/）かどうか */
	function isFaqPage() {
		return location.pathname.indexOf('/faq/') !== -1;
	}

	/*
		FAQ配下用。すでにFAQを見ている人向けなのでAIチャットへ直接飛ばす。
		デザインは角丸10pxの横長バー（PC node-id 7-7598 / SP node-id 136-1974）。
		丸ピルはトップページのパネル開閉ボタンが使うので --chat で分ける。
	*/
	function buildChatHtml() {
		return '<a href="' + AICHAT_URL + '" class="c-helpDock__btn c-helpDock__btn--chat js-aiChatTrigger">' +
				'<span class="c-helpDock__btnIcon"><img src="/personal/inc/images/faq/img_faq-aichat-robot.png" width="44" height="56" alt=""></span>' +
				'<span class="c-helpDock__btnBody">' +
					'<span class="c-helpDock__btnLabel">AIチャットでお問い合わせ</span>' +
					'<span class="c-helpDock__btnNote">商品・サービスについて24時間対応</span>' +
				'</span>' +
			'</a>';
	}

	function buildHtml() {
		var items = '';
		var i;
		var chatClass;

		for (i = 0; i < LINKS.length; i++) {
			chatClass = LINKS[i].chat ? ' js-aiChatTrigger' : '';
			items += '<li class="c-helpDock__item">' +
				'<a href="' + LINKS[i].href + '" class="c-helpDock__link' + chatClass + '">' +
				'<span class="c-helpDock__icon ' + LINKS[i].mod + '">' + LINKS[i].icon + '</span>' +
				'<span class="c-helpDock__linkLabel">' + LINKS[i].label + '</span>' +
				'<img class="c-helpDock__arrow" src="/z-inc/img/icon_angle_right.svg" width="9" height="16" alt="">' +
				'</a></li>';
		}

		return '<div class="c-helpDock__panel" id="helpDockPanel" role="region" aria-labelledby="helpDockTitle" hidden>' +
				'<div class="c-helpDock__head">' +
					'<div class="c-helpDock__headTitle">' +
						'<span class="c-helpDock__headIcon"><img src="/personal/inc/images/faq/img_faq-aichat-robot.png" width="26" height="33" alt=""></span>' +
						'<p class="c-helpDock__title" id="helpDockTitle">ご質問はこちら</p>' +
					'</div>' +
					'<button type="button" class="c-helpDock__close" id="helpDockClose">' +
						'<span>閉じる</span>' +
					'</button>' +
				'</div>' +
				'<ul class="c-helpDock__list">' + items + '</ul>' +
			'</div>' +
			'<button type="button" class="c-helpDock__btn" id="helpDockBtn" aria-expanded="false" aria-controls="helpDockPanel">' +
				'<span class="c-helpDock__btnIcon"><img src="/personal/inc/images/faq/img_faq-aichat-robot.png" width="26" height="33" alt=""></span>' +
				'<span class="c-helpDock__btnBody">' +
					'<span class="c-helpDock__btnLabel">ご質問はこちら</span>' +
					'<span class="c-helpDock__btnNote">商品・サービスについて24時間対応</span>' +
				'</span>' +
			'</button>';
	}

	function init() {
		var dock = document.createElement('div');
		var btn;
		var closeBtn;
		var panel;

		/* SPで全幅のバーにするため、包み側にも印を付ける */
		dock.className = isFaqPage() ? 'c-helpDock c-helpDock--chat' : 'c-helpDock';
		dock.innerHTML = isFaqPage() ? buildChatHtml() : buildHtml();
		document.body.appendChild(dock);
		loadChatbot();

		document.addEventListener('click', function (e) {
			if (!isChatTrigger(e.target)) {
				return;
			}
			e.preventDefault();
			if (panel && !panel.hidden) {
				setOpen(false);
			}
			openChatbot();
		});

		btn = document.getElementById('helpDockBtn');
		closeBtn = document.getElementById('helpDockClose');
		panel = document.getElementById('helpDockPanel');

		function setOpen(open) {
			panel.hidden = !open;
			btn.setAttribute('aria-expanded', open ? 'true' : 'false');
			if (open) {
				dock.classList.add('is-open');
			} else {
				dock.classList.remove('is-open');
			}
		}

		/* フッターに重なったら隠す（従来の追従バナーと同じ挙動） */
		function watchFooter() {
			var footer = document.querySelector('.l-footer') || document.querySelector('footer');
			var timer = null;

			if (!footer) {
				return;
			}

			function update() {
				var overlapped = footer.getBoundingClientRect().top <= window.innerHeight - 10;

				/* パネルを開いている間は消さない */
				if (overlapped && (!panel || panel.hidden)) {
					dock.classList.add('is-hidden');
				} else {
					dock.classList.remove('is-hidden');
				}
			}

			function onScroll() {
				if (timer) {
					return;
				}
				timer = window.setTimeout(function () {
					timer = null;
					update();
				}, 100);
			}

			window.addEventListener('scroll', onScroll);
			window.addEventListener('resize', onScroll);
			update();
		}

		watchFooter();

		/* FAQ配下はリンク1本だけなので開閉処理は不要 */
		if (!panel) {
			return;
		}

		btn.addEventListener('click', function () {
			setOpen(panel.hidden);
		});

		closeBtn.addEventListener('click', function () {
			setOpen(false);
			btn.focus();
		});

		/* パネルの外側をクリックしたら閉じる */
		document.addEventListener('click', function (e) {
			var target = e.target;
			if (panel.hidden) {
				return;
			}
			while (target) {
				if (target === dock) {
					return;
				}
				target = target.parentNode;
			}
			setOpen(false);
		});

		/* Escキーで閉じる */
		document.addEventListener('keydown', function (e) {
			if ((e.keyCode === 27) && !panel.hidden) {
				setOpen(false);
				btn.focus();
			}
		});
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}

})();