<template>
	<el-dialog
		:title="$t('Meta Editor')"
		width="80%"
		:visible.sync="visible"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
		fullscreen
		:append-to-body="true"
		custom-class="flex-dialog behavior-editor-dialog"
	>
		<div class="meta-editor-wrapper">
			<el-form
				ref="form"
				v-if="meta"
				:model="meta"
				:rules="rules"
				:show-message="false"
				class="info-editor"
				size="mini"
				label-position="right"
				label-width="70px"
				@submit.native.prevent
			>
				<template>
					<el-form-item prop="id" :label="$t('ID')">
						<el-input
							v-model="meta.id"
							:placeholder="$t('ID')"
							:readonly="!editable"
						/>
					</el-form-item>
					<el-form-item prop="name" :label="$t('Name')">
						<el-input
							v-model="meta.name"
							:placeholder="$t('Name')"
							:readonly="!editable"
						/>
					</el-form-item>
					<el-form-item prop="desc" :label="$t('Desc')">
						<el-input
							v-model="meta.desc"
							:placeholder="$t('Description')"
							:readonly="!editable"
						/>
					</el-form-item>
					<!--<el-form-item prop="type" label="Type">
						<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
					</el-form-item>
					<el-form-item prop="group" label="Group">
						<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
					</el-form-item>-->
					<el-form-item :label="$t('Props')">
						<el-link
							:underline="false"
							@click="onClickEditProps"
							:disabled="!editable"
						>
							<template v-if="Object.keys(meta.props).length">
								<el-tag
									type="success"
									size="mini"
									v-for="(option, key) in meta.props"
									:key="key"
								>{{ key }}
								</el-tag
								>
							</template>
							<template v-else>{{ $t("Empty") }}</template>
						</el-link>
					</el-form-item>
					<el-form-item :label="$t('Output')">
						<div style="display: flex;flex: 1;">
							<el-select
								style="flex: 1;"
								v-model="meta.output"
								:disabled="!editable"
								allow-create
								filterable
								multiple
								:placeholder="$t('Output')"
							/>
						</div>
					</el-form-item>
				</template>
			</el-form>
			<div style="margin-top: 5px;">
				<code-sync-indicator/>
				<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{
					item
					}}
				</el-tag>
			</div>
			<process-script-editor v-if="meta" :meta="meta"/>
		</div>
		<div slot="footer" class="dialog-footer">
			<div>
				<el-button-group style="margin-right: 20px;">
					<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
					<el-popover>
						<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
						<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
					</el-popover>
				</el-button-group>
			</div>
			<div class="button-bar">
				<el-button size="mini" plain @click="cancel">{{
					$t("Cancel")
					}}
				</el-button>
				<!--<el-button size="mini" plain @click="save(true)">{{$t('Save And Preview')}}</el-button>-->
				<el-button size="mini" type="primary" @click="save(false)">{{
					$t("Save")
					}}
				</el-button>
			</div>
		</div>
		<props-editor-dialog ref="propsEditorDialog"/>
	</el-dialog>
</template>

<script>
	import PropsEditorDialog from "./PropsEditorDialog";
	import copy from "copy-to-clipboard";
	import {clonePureObj} from "../../../utils";
	import events from "../../../global-events";
	import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
	import ProcessScriptEditor from "./ProcessScriptEditor";

	const exposeVariables = ["args", "props", "target", "global", "vm", "engine", 'scope'];

	export default {
		name: "MetaEditorDialog",
		components: {
			ProcessScriptEditor,
			CodeSyncIndicator,
			PropsEditorDialog,
		},
		data() {
			return {
				visible: false,
				meta: null,
				propsEditorVisible: false,
				exposeVariables,

				rules: {
					id: [{required: true, trigger: "blur",}],//message: this.$t('ID required')
					name: [{required: true, trigger: "blur",}],//message: this.$t('Name required')
				},
			};
		},
		mounted() {
			events.$on("edit-save", this.onEditSave);
		},
		destroyed() {
			events.$off("edit-save", this.onEditSave);
		},
		computed: {
			editable() {
				return this.meta; // && this.meta.type !== 'builtin';
			},
			props() {
				return Object.keys(this.meta.props).join(",");
			}
		},
		methods: {
			edit(meta) {
				this.visible = true;
				this.meta = clonePureObj(meta);
				this.oldMetaID = this.meta.id;

				events.$emit("edit-open", this.meta.script);
			},
			onEditSave(code) {
				this.$set(this.meta, "script", code);
			},
			onClickEditProps() {
				this.$refs.propsEditorDialog.edit(this.meta.props);
			},
			save() {
				this.$refs.form.validate(valid => {
					if (valid) {
						if (
							this.oldMetaID !== this.meta.id &&
							this.$store.getters.metaIDExists(this.meta.id)
						) {
							this.$alert(
								this.$t("This Meta ID is in use, can not save"),
								this.$t("Alert")
							).catch(e => {
							});
						} else {
							this.$emit("input", this.meta);
							this.visible = false;
						}
					} else {
						return false;
					}
				});
			},
			cancel() {
				this.visible = false;
			},
			copyMeta() {
				copy(JSON.stringify(this.meta));
			},
			pasteMeta() {
				//setTimeout(this.focusPasteBoard, 1000, this);
			},
			onPaste(e) {
				let metaStr = e.clipboardData.getData("Text");
				if (metaStr) {
					try {
						this.meta = JSON.parse(metaStr);
					} catch (e) {
					}
				}
			},
			focusPasteBoard() {
				this.$refs.pasteBoard.focus();
			},
		}
	};
</script>

<style scoped></style>
