import ReactDOM from 'react-dom/client';

export default class BaseModalMenu {
	id: string = `modal-${Math.random().toString(36).slice(2)}`;
	title: string;
	tag: string;
	$ele: HTMLDivElement;
	$root: any;
	ifInit: boolean = false;
	controlShow: (i: boolean) => void = Function.prototype as any;

	constructor() {
		this.title = '素材库';
		// this.iconSvg = '<svg >...</svg>'; icon
		this.tag = 'button';
		this.$ele = document.createElement('div');
		this.$ele.id = this.id;
		document.body.appendChild(this.$ele);
		this.$root = ReactDOM.createRoot(this.$ele!);
	}

	modalInit = (method: (i: boolean) => void) => {
		// 这里把控制react的方法透出
		this.controlShow = method;
	};

	isActive() {
		return false; // or false
	}

	isDisabled() {
		return false; // or true
	}

	exec(editor: any, value: any) {
		if (this.ifInit) {
			this.controlShow(true);
			return;
		}
		this.$root.render(value);
		this.ifInit = true;
	}
}
