import {
	observer,
} from 'mobx-react';
import {
	WeaRichText
} from "ecCom";
import { i18n } from '../../../public/i18n';

const ckConfig = {
	toolbar: [{
		name: "markdown",
		items: ["Markdown"]
	}, {
		name: "basicstyles",
		items: [
			"Bold",
			"Italic",
			"Underline",
			"Strike",
			"RemoveFormat",
		]
	}, {
		name: "colors",
		items: ["TextColor", "BGColor"]
	}, {
		name: "paragraph",
		items: [
			"JustifyLeft",
			"JustifyCenter",
			"JustifyRight",
		]
	}, {
		name: "links",
		items: ["Link", "Unlink"]
	}, {
		name: "styles",
		items: ["Font", "FontSize"]
	}, ]
}

@observer
export default class EditablePara extends React.Component {
	//1. 设置侧边栏类型
	//2. 设置选中DOM节点的标识
	//3. 打开侧边栏
	handleClick = () => {
		const {
			store,
			type,
			domId,
		} = this.props, {
			setVisible,
			setSelectedDomId,
			setType,
			visible
		} = store;

		setType(type);
		setSelectedDomId(domId);
		setVisible(true);

	}

	//1. 打开富文本
	//2. 关闭侧边栏
	handleDoubleClick = () => {
		const {
			setRichTextStatus,
			setVisible
		} = this.props.store;

		setRichTextStatus(true);
		setVisible(false);
	}

	render() {
		const {
			store,
			is_show,
			style,
			value,
			is_selected,
			domId,
		} = this.props, {
			setRef
		} = store;

		if (is_show) {
			return (
				<div className="rich-text" id={domId} style={style}>
					<WeaRichText
			          placeholder={i18n.label.pleaseInputContent()}
			          ref={setRef}
			          value={value}
			          ckConfig={ckConfig}
			        />
		        </div>
			)
		} else {
			return (
				<div 
					id={domId}
					className={`text ${domId}${is_selected ? " selected" : ""}`} 
					style={style} 
					onClick={this.handleClick}
					onDoubleClick={this.handleDoubleClick}
					dangerouslySetInnerHTML = {{ __html: value || "<p class='no-text'>{i18n.label.dbClickToEdit()}</p>"  }}
				/>
			)
		}

	}
}