<template>
	<div class="setting-wrapper mini-scrollbar">
		<div class="banner">
			<div class="title">{{ t('Settings.title') }}</div>
			<div class="slogan">{{ t('Settings.slogan') }}</div>
		</div>

		<div class="setting-content">
			<ProfileSection
				v-model:first-name="draftData.firstName"
				v-model:last-name="draftData.lastName"
				v-model:username="draftData.username"
				v-model:role-model="roleModel"
				:display-data="displayData"
				:full-name="fullName"
				:is-editing="isEditing"
				:role-options="roleList"
			/>

			<div class="gap" />

			<SecuritySection
				v-model:new-email="securityDraft.newEmail"
				v-model:new-password="securityDraft.newPassword"
				v-model:current-password="securityDraft.currentPassword"
				:email="displayData.email"
				:is-editing="isEditing"
				:is-editing-email="isEditingEmail"
				:is-editing-password="isEditingPassword"
				:is-email-verified="isEmailVerified"
				@edit-email="handleEditEmail"
				@edit-password="handleEditPassword"
				@reset-email="resetSecurityEmail"
				@reset-password="resetSecurityPassword"
				@verify-email="handleVerifyEmail"
			/>

			<div class="gap" />

			<RegionSection
				v-model:language="draftData.language"
				v-model:region="draftData.region"
				:display-language-label="displayLanguageLabel"
				:display-region-label="displayRegionLabel"
				:is-editing="isEditing"
				:language-options="languageList"
				:region-options="regionList"
			/>

			<div class="gap bottom-gap" />

			<SettingsActions
				:is-editing="isEditing"
				:saving="saving"
				:needs-email-verification="needsEmailVerification"
				@edit="handleEdit"
				@save="handleSave"
				@verify="handleVerifyEmail"
				@discard="handleDiscard"
			/>
		</div>

		<Footer />

		<EmailVerificationDialog
			:visible="isVerificationDialogVisible"
			:email="displayData.email"
			:saving="saving"
			@close="closeVerificationDialog"
			@resend="handleSendVerifyCode"
			@submit="handleVerificationSubmit"
		/>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { useI18n } from 'vue-i18n'
	import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
	import ProfileSection from './components/ProfileSection.vue'
	import RegionSection from './components/RegionSection.vue'
	import SecuritySection from './components/SecuritySection.vue'
	import SettingsActions from './components/SettingsActions.vue'
	import { useSettingsForm } from './useSettingsForm'

	const { t, locale } = useI18n({ useScope: 'global' })

	const {
		draftData,
		securityDraft,
		isEditing,
		saving,
		isVerificationDialogVisible,
		verificationTargetEmail,
		roleList,
		languageList,
		regionList,
		displayData,
		isEmailVerified,
		displayLanguageLabel,
		displayRegionLabel,
		fullName,
		roleModel,
		needsEmailVerification,
		isEditingEmail,
		isEditingPassword,
		handleEdit,
		handleDiscard,
		handleSave,
		handleEditEmail,
		handleEditPassword,
		resetSecurityEmail,
		resetSecurityPassword,
		handleVerifyEmail,
		handleSendVerifyCode,
		handleVerificationSubmit,
		closeVerificationDialog,
		loadUserProfile
	} = useSettingsForm({ t, locale })

	onMounted(() => {
		loadUserProfile()
	})
</script>

<style lang="less" scoped>
	.setting-wrapper {
		height: 100%;
		overflow-y: auto;
		background: #ffffff;
	}

	.banner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 14.8rem;
		row-gap: 1.2rem;
		background: url('@/assets/images/wardrobe/settings_bg.jpg') no-repeat;
		background-size: cover;
	}

	.title {
		font-family: 'KaiseiOpti-Bold';
		font-size: 4rem;
		line-height: 3.6rem;
		color: #232323;
	}

	.slogan {
		font-family: 'KaiseiOpti-Regular';
		font-size: 1.6rem;
		line-height: 2.4rem;
		color: #585858;
	}

	.setting-content {
		padding: 4rem 18rem 7rem;
	}

	.gap {
		height: 0.05rem;
		margin-top: 6rem;
		margin-bottom: 4rem;
		background-color: #c4c4c4;

		&.bottom-gap {
			margin-top: 4rem;
		}
	}

	:deep(.el-select-dropdown__item) {
		padding: 0 2rem !important;
	}
</style>
