<template>
	<XModalWindow
		ref="dialog"
		:width="370"
		:with-ok-button="true"
		@close="$refs.dialog.close()"
		@closed="$emit('closed')"
		@ok="ok()"
	>
		<template #header>:{{ emoji.name }}:</template>

		<div class="_monolithic_">
			<div class="yigymqpb _section">
				<img :src="emoji.url" class="img" />
				<MkInput v-model="name" class="_formBlock">
					<template #label>{{ i18n.ts.name }}</template>
				</MkInput>
				<MkInput
					v-model="category"
					class="_formBlock"
					:datalist="categories"
				>
					<template #label>{{ i18n.ts.category }}</template>
				</MkInput>
				<MkInput v-model="aliases" class="_formBlock">
					<template #label>{{ i18n.ts.tags }}</template>
					<template #caption>{{
						i18n.ts.setMultipleBySeparatingWithSpace
					}}</template>
				</MkInput>
				<MkTextarea v-model="license" class="_formBlock">
					<template #label>{{ i18n.ts.license }}</template>
				</MkTextarea>
				<MkSwitch v-model="glyph" class="_formBlock">
					<template #label>Glyph</template>
					<template #caption>Use semicolon syntax and render this SVG in the current text color.</template>
				</MkSwitch>
				<MkButton danger @click="del()"
					><i class="ph-trash ph-bold ph-lg"></i>
					{{ i18n.ts.delete }}</MkButton
				>
			</div>
		</div>
	</XModalWindow>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import {} from "vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import MkButton from "@/components/MkButton.vue";
import MkInput from "@/components/form/input.vue";
import MkTextarea from "@/components/form/textarea.vue";
import MkSwitch from "@/components/form/switch.vue";
import * as os from "@/os";
import { unique } from "@/scripts/array";
import { i18n } from "@/i18n";
import { emojiCategories } from "@/instance";

const props = defineProps<{
	emoji: any;
}>();

let dialog = ref(null);
let name: string = ref(props.emoji.name);
let category: string = ref(props.emoji.category);
let aliases: string = ref(props.emoji.aliases.join(" "));
let categories: string[] = ref(emojiCategories);
let license: string = ref(props.emoji.license ?? "");
let glyph = ref(!!props.emoji.glyph);

const emit = defineEmits<{
	(ev: "done", v: { deleted?: boolean; updated?: any }): void;
	(ev: "closed"): void;
}>();

function ok() {
	update();
}

async function update() {
	await os.apiWithDialog("admin/emoji/update", {
		id: props.emoji.id,
		name: name.value,
		category: category.value,
		aliases: aliases.value.split(" "),
		license: license.value === "" ? null : license.value,
		glyph: glyph.value,
	});

	emit("done", {
		updated: {
			id: props.emoji.id,
			name: name.value,
			category: category.value,
			aliases: aliases.value.split(" "),
			license: license.value === "" ? null : license.value,
			glyph: glyph.value,
		},
	});

	dialog.value.close();
}

async function del() {
	const { canceled } = await os.confirm({
		type: "warning",
		text: i18n.t("removeAreYouSure", { x: name.value }),
	});
	if (canceled) return;

	os.api("admin/emoji/delete", {
		id: props.emoji.id,
	}).then(() => {
		emit("done", {
			deleted: true,
		});
		dialog.value.close();
	});
}
</script>

<style lang="scss" scoped>
.yigymqpb {
	> .img {
		position: relative;
		display: block;
		height: 64px;
		margin: 0 auto;
	}
}
</style>
