<template>
<div class="ulveipgl" :style="{ pointerEvents: closing ? 'none' : 'auto' }">
	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="destroy">
		<div class="bg _modalBg" ref="bg" v-if="!closing" @click="close()"></div>
	</transition>
	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
		<transition :name="$store.state.device.animation ? 'form' : ''" appear
			@after-leave="destroyDom"
		>
			<x-post-form ref="form"
				v-if="!closing"
				:reply="reply"
				:renote="renote"
				:mention="mention"
				:specified="specified"
				:initial-text="initialText"
				:initial-note="initialNote"
				:instant="instant"
				@posted="onPosted"
				@cancel="onCanceled"
				style="border-radius: var(--radius);"
			/>
		</transition>
	</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import XPostForm from './post-form.vue';
import * as os from '@/os';

export default defineComponent({
	components: {
		XPostForm
	},

	props: {
		destroy: {
			required: true
		},
		emit: {
			required: true
		},
		reply: {
			type: Object,
			required: false
		},
		renote: {
			type: Object,
			required: false
		},
		mention: {
			type: Object,
			required: false
		},
		specified: {
			type: Object,
			required: false
		},
		initialText: {
			type: String,
			required: false
		},
		initialNote: {
			type: Object,
			required: false
		},
		instant: {
			type: Boolean,
			required: false,
			default: false
		}
	},

	data() {
		return {
			closing: false
		};
	},

	methods: {
		focus() {
			this.$refs.form.focus();
		},

		close() {
			this.closing = true;
		},

		onPosted() {
			this.$emit('posted');
			this.close();
		},

		onCanceled() {
			this.$emit('cancel');
			this.close();
		},

		onKeydown(e) {
			if (e.which === 27) { // Esc
				e.preventDefault();
				e.stopPropagation();
				this.close();
			}
		},
	}
});
</script>

<style lang="scss" scoped>
.form-enter-active, .form-leave-active {
	transition: opacity 0.3s, transform 0.3s !important;
}
.form-enter-from, .form-leave-to {
	opacity: 0;
	transform: scale(0.9);
}

.form-fade-enter-active, .form-fade-leave-active {
	transition: opacity 0.3s !important;
}
.form-fade-enter-from, .form-fade-leave-to {
	opacity: 0;
}

.ulveipgl {
	> .bg {
		z-index: 10000;
	}

	> .main {
		display: block;
		position: fixed;
		z-index: 10000;
		top: 32px;
		left: 0;
		right: 0;
		height: calc(100% - 64px);
		width: 500px;
		max-width: calc(100% - 16px);
		overflow: auto;
		margin: 0 auto 0 auto;

		@media (max-width: 550px) {
			top: 16px;
			height: calc(100% - 32px);
		}

		@media (max-width: 520px) {
			top: 8px;
			height: calc(100% - 16px);
		}
	}
}
</style>
