/*!
 * Jodit Editor PRO (https://xdsoft.net/jodit/)
 * See LICENSE.md in the project root for license information.
 * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
 */

import type { CanUndef, IJodit } from 'jodit/types';
// import type { IEmoji, IEmojiData } from './interface';
// import type { IAutoCompleteItem } from '../autocomplete/interface';
import { Plugin } from 'jodit/core/plugin';
import { Dialog } from 'jodit/modules';
// import { Emoji } from './ui/emoji';
// import { trim } from 'jodit/core/helpers';
// import { autobind } from 'jodit/core/decorators';
import { Jodit } from '../../index';
import autobind from 'autobind-decorator';
import { Button } from 'jodit/core/ui/button';
import './config';
import { attr, css } from 'jodit/src/core/helpers';
import { IframeType, InlinePopupAttribute } from '../inline-popup/inline-popup';

export const enum PostMessagePath {
	Editor = 'superclub/editor',
	Vote = 'superclub/vote',
	Superclub = 'superclub',
	Chat = 'superclub/chat'
}

const enum RequestCommand {
	Initialize = 'initialize',
	CreateVote = 'create/vote',
	ResetVote = 'reset/vote'
}

const enum ResponseCommand {
	CreateSuccess = 'create/vote/success',
	Ready = 'ready',
	MeasureHeightSuccess = 'measure/height/success'
}

export class vote extends Plugin {
	// /** @override */
	// override hasStyle: boolean = !Jodit.fatMode;

	private __dialog!: Dialog;
	private __voteIframe!: HTMLIFrameElement;
	// private __voteId!: number;

	/** @override */
	protected async afterInit(jodit: IJodit): Promise<void> {
		jodit.e
			.on('toggleVote', this.toggleVote)
			.on('isVoteOpened', () => this.__dialog?.isOpened);

		window.addEventListener('message', this.messageHandler);
	}

	/** @override */
	protected beforeDestruct(jodit: IJodit): void {}

	@autobind
	toggleVote(target: CanUndef<HTMLElement>): void {
		if (!this.__dialog) {
			this.__dialog = new Dialog({
				resizable: false,
				draggable: false
			});

			this.__dialog.setHeader(this.jodit.i18n('poll')).setSize(600, 700);
		}

		this.__voteIframe = this.jodit.c.fromHTML(
			`<iframe src="${this.jodit.o.vote.url}create" width=100% height=100% />`
		) as HTMLIFrameElement;
		this.__dialog.setContent(this.__voteIframe);

		const dlg = this.__dialog;

		if (dlg.isOpened) {
			dlg.close();
		} else {
			// 초기화 버튼 생성
			const resetButton = Button(
				dlg,
				'refresh',
				this.jodit.i18n('Reset'),
				'initial'
			)
				.onAction(() => {
					this.postMessageToVote(RequestCommand.ResetVote);
				})
				.setState({ size: 'large' })
				.setMod('dialog', 'button');

			// 초기화 버튼 아이콘 크기 조정
			try {
				const svgElement = resetButton.icon.getElementsByTagName('svg');
				svgElement[0].style.width = '24px';
				svgElement[0].style.height = '24px';
			} catch (error) {
				console.log(error);
			}

			// 확인 버튼 생성
			const confirmButton = Button(
				dlg,
				'',
				this.jodit.i18n('Confirm'),
				'primary'
			)
				.onAction(() => {
					this.postMessageToVote(RequestCommand.CreateVote);
				})
				.setState({ size: 'large' })
				.setMod('dialog', 'button');
			confirmButton.container.style.width = '180px';

			dlg.setFooter([resetButton, confirmButton]).open();
		}
	}

	@autobind
	private postMessageToVote(command: RequestCommand, data?: any): void {
		if (this.__voteIframe?.contentWindow) {
			this.__voteIframe.contentWindow.postMessage(
				{
					from: PostMessagePath.Editor,
					command,
					...data
				},
				'*'
			);
		}
	}

	// command에 따라 로직 분기
	@autobind
	private messageHandler(e: MessageEvent): void {
		const { from, command, data } = e.data;
		// console.log('에디터. 투표에서 받음', command);
		if (from !== PostMessagePath.Vote) return;

		switch (command) {
			case ResponseCommand.Ready:
				// console.log('에디터. 투표 초기화');
				this.initVoteConfig();
				break;

			case ResponseCommand.CreateSuccess:
				if (data?.code === 201) {
					this.insertVote(data.data.id);
				}
				break;

			case ResponseCommand.MeasureHeightSuccess: {
				console.log('height');
				console.log(data?.height);
				this.applyHeight(data?.height);
				break;
			}

			default:
				break;
		}
	}

	@autobind
	private initVoteConfig(): void {
		const accessToken = localStorage.getItem('accessToken');
		this.postMessageToVote(RequestCommand.Initialize, { accessToken });
	}

	@autobind
	private insertVote(voteId: number): void {
		try {
			attr(this.__voteIframe, {
				title: `vote_${voteId}`,
				id: `vote_iframe_${voteId}`,
				src: `${this.jodit.o.vote.url}vote/${voteId}`,
				resizable: 'false',
				'data-vote-created': true
			});

			css(this.__voteIframe, {
				width: '600px',
				height: '400px',
				border: '1px solid #cdcdd1',
				'border-radius': '20px',
				overflow: 'hidden'
				// 'max-height': '700px'
			});

			this.jodit.s.insertNode(this.__voteIframe);
			const nbspNode = this.jodit.c.fromHTML('<span>&nbsp;</span>');
			this.jodit.s.insertNode(nbspNode);

			if (this.__dialog?.isOpened) {
				this.__dialog.close();
			}
		} catch (error) {
			if (this.__dialog?.isOpened) {
				this.__dialog.close();
			}
		}
	}

	@autobind
	private applyHeight(height: number): void {
		try {
			const parentElement = this.__voteIframe?.parentElement;
			if (
				this.__voteIframe.getAttribute('data-vote-created') ===
					'true' &&
				parentElement
			) {
				attr(parentElement, {
					[InlinePopupAttribute.IFRAME_TYPE]: IframeType.VOTE
				});
				css(parentElement, {
					border: 'none',
					'border-radius': '0',
					overflow: 'hidden',
					height: 'auto'
				});

				// if (height > 700) {
				// 	this.__voteIframe.style.height = '700px';
				// } else {
				this.__voteIframe.style.height = `${height}px`;
				// }
			}
		} catch (error) {
			if (this.__dialog?.isOpened) {
				this.__dialog.close();
			}
		}
	}
}

Jodit.plugins.add('vote', vote);