<template>
	<n-modal
		v-model:show="show"
		preset="card"
		:title="dialogTitle"
		:style="modalStyle"
		:mask-closable="true"
		:close-on-esc="true"
		class="tfa-dialog"
	>
		<template #header>
			<span class="text-lg font-semibold">{{ dialogTitle }}</span>
		</template>
		<Configure2FA @enabled="closeDialog" @disabled="closeDialog" />
	</n-modal>
</template>

<script>
import { NModal } from 'naive-ui';
import Configure2FA from '../../auth/Configure2FA.vue';

export default {
	props: {
		modelValue: {
			type: Boolean,
			required: true
		}
	},
	components: {
		NModal,
		Configure2FA
	},
	computed: {
		is2FAEnabled() {
			return this.$team.pg?.user_info?.is_2fa_enabled;
		},
		dialogTitle() {
			return this.is2FAEnabled
				? this.$t('Disable Two-Factor Authentication')
				: this.$t('Enable Two-Factor Authentication');
		},
		isMobile() {
			return window.innerWidth <= 768;
		},
		modalStyle() {
			return {
				width: this.isMobile ? '95vw' : '700px',
				maxWidth: this.isMobile ? '95vw' : '90vw',
			};
		},
		show: {
			get() {
				return this.modelValue;
			},
			set(value) {
				this.$emit('update:modelValue', value);
			}
		}
	},
	methods: {
		closeDialog() {
			this.show = false;
		}
	}
};
</script>

<style scoped>
@media (max-width: 768px) {
	:deep(.tfa-dialog .n-card) {
		width: 95vw !important;
		max-width: 95vw !important;
		margin: 20px auto;
		border-radius: 12px;
	}

	:deep(.tfa-dialog .n-card-body) {
		padding: 20px 16px;
	}
}
</style>