<script setup lang="ts">
	import { ref, reactive, onMounted, inject } from 'vue'
	import router from '@/router'
	import { showConfirmDialog } from 'vant'
	import { useUserInfoStore, useOverallStore } from '@/stores'
	import { LogOut } from '@/api/login'
	const userInfoStore = useUserInfoStore()
	const overallStore = useOverallStore()
	const emit = defineEmits(['view-type'])
	const show = ref(false)
	const isEdit = ref(false)
	const form = reactive({
		name: { msg: '', value: userInfoStore.state.userInfo.username },
		email: { msg: '', value: userInfoStore.state.userInfo.email },
		password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
	})
	const open = () => {
		isEdit.value = false
		show.value = true
	}
	const close = () => {
		show.value = false
	}
	const onEditItem = (item) => {
		if (!form[item]) return
		form[item].edit = true
	}
	const onSaveItem = (item) => {
		if (!form[item]) return
		form[item].edit = false
	}
	const switchCustomer = () => {
		console.log('switchCustomer')
	}
	const edit = () => {
		isEdit.value = true
	}
	const confirm = () => {
		overallStore.setLoading(true)
		setTimeout(() => {
			overallStore.setLoading(false)
			isEdit.value = false
		}, 1000)
	}
	const logout = () => {
		showConfirmDialog({
			title: 'Log out',
			message: 'Are you sure you want to log out?',
			confirmButtonText: 'Yes',
			cancelButtonText: 'Cancel'
		})
			.then(() => {
				LogOut().then(() => {
					userInfoStore.logOut()
					router.push({ path: '/welcome' })
				})
			})
			.catch(() => {})
	}
	defineExpose({ open })
</script>

<template>
	<van-popup class="van-popup" v-model:show="show" position="bottom" round>
		<div class="profile">
			<div class="header">
				<span class="title">Profile</span>
				<van-icon name="cross" class="close" @click="close" />
			</div>
			<div class="box">
				<div class="form-item">
					<div class="label">Your Name</div>
					<label class="input">
						<div class="icon"><SvgIcon name="user" size="64" /></div>
						<input
							type="text"
							placeholder="Enter your name"
							v-model="form.name.value"
							:readonly="!isEdit"
						/>
						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
							<SvgIcon name="confirmation" size="37" />
						</div>
						<div class="icon" v-else @click="onEditItem('name')">
							<SvgIcon name="edit" size="37" />
						</div> -->
					</label>
					<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
				</div>
				<div class="form-item">
					<div class="label">Your Email</div>
					<label class="input">
						<div class="icon"><SvgIcon name="email" size="64" /></div>
						<input
							type="email"
							placeholder="Enter your email"
							v-model="form.email.value"
							:readonly="!isEdit"
							required
						/>
						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
							<SvgIcon name="confirmation" size="37" />
						</div>
						<div class="icon" v-else @click="onEditItem('email')">
							<SvgIcon name="edit" size="37" />
						</div> -->
					</label>
					<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
				</div>
				<div class="form-item">
					<div class="label">Password</div>
					<label class="input">
						<div class="icon" @click="form.password.show = !form.password.show">
							<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
						</div>
						<input
							:type="form.password.show ? 'text' : 'password'"
							placeholder="Enter your password"
							v-model="form.password.value"
							:readonly="!isEdit"
						/>
						<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
							<SvgIcon name="confirmation" size="37" />
						</div>
						<div class="icon" v-else @click="onEditItem('password')">
							<SvgIcon name="edit" size="37" />
						</div> -->
					</label>
					<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
				</div>

				<template v-if="isEdit">
					<button class="confirm" @click="confirm">Confirm</button>
					<p class="tip">Powered by AiDLab for Lane Crawford</p>
				</template>
				<template v-else>
					<button class="switch" @click="switchCustomer">Switch Customer</button>
					<button class="edit" @click="edit">Edit Profile</button>
					<button class="logout" @click="logout">Log out</button>
				</template>
			</div>
		</div>
	</van-popup>
</template>

<style scoped lang="less">
	.van-popup {
		max-height: 90%;
		--van-popup-round-radius: 7.8rem;
	}
	.profile {
		margin: 6.5rem 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .header {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 0 7rem;
			margin-bottom: 8rem;
			> .title {
				font-family: satoshiBold;
				font-size: 4.6rem;
				color: #181725;
			}
			> .close {
				margin-left: auto;
				font-size: 5rem;
				color: #a1a1a1;
			}
		}
		> .box {
			width: 100%;
			padding: 0 13rem;
			> div {
				width: 100%;
				margin-top: 5.1rem;
				&:first-child {
					margin-top: 0;
				}
			}
			> button {
				margin-top: 8.5rem;
				width: 100%;
				height: 14.5rem;
				border-radius: 2rem;
				font-size: 4rem;
				border: 0.2rem solid #3b3b3b;
				font-family: satoshiBold;
			}
			> .form-item {
				> .label {
					margin-bottom: 2.5rem;
					font-family: satoshiBold;
					font-size: 2.9rem;
					line-height: 120%;
					color: #262422;
				}
				> .input {
					// width: 100%;
					height: 13.9rem;
					border-radius: 2.5rem;
					border: 0.2rem solid #f1ecec;
					box-sizing: content-box;
					display: flex;
					align-items: center;
					overflow: hidden;
					padding: 0 2.5rem;
					> * {
						margin-right: 2.5rem;
						&:last-child {
							margin-right: 0;
						}
					}
					> .icon {
						// margin: 0 2.5rem;
						--svg-icon-color: #ababab;
					}
					> input {
						width: 0;
						flex: 1;
						height: 100%;
						font-family: satoshiMedium;
						font-size: 3.5rem;
						color: #000;
						border: none;
						&::placeholder {
							color: #ababab;
						}
					}
				}
				> .error {
					margin-top: 1rem;
					font-family: satoshiRegular;
					font-size: 2.5rem;
					line-height: 120%;
					color: #ff0000;
				}
			}
			> .switch {
				background-color: transparent;
				color: #222;
			}
			> .confirm,
			> .edit,
			> .logout {
				background-color: #000;
				color: #fff;
			}
			> .tip {
				font-family: satoshiRegular;
				text-align: center;
				font-size: 3rem;
				color: #a1a1a1;
				margin-top: 17.8rem;
			}
		}
	}
</style>
