<template>
    <div>

        <div class="row justify-content-center">
            <div class="col-md-6 text-center mb-2">
                <h2 class="heading-section">ĐĂNG KÝ</h2>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-4">
                <div class="card">

                    <div class="card-body">
                        <div class="login-wrap p-md-3">
                            <div class="text-danger validation-summary-errors text-center"
                                v-show="authStore.errorMessage">
                                <ul>
                                    <li>{{ authStore.errorMessage }}</li>
                                </ul>
                            </div>
                            <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
                                <div class="form-group mb-3">
                                    <label>Tên đăng nhập</label>
                                    <Field name="username" type="text" class="form-control" placeholder="Tên đăng nhập"
                                        :class="{ 'is-invalid': errors.username }" />
                                    <div class="invalid-feedback">{{ errors.username }}</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Họ và tên</label>
                                    <Field name="fullName" type="text" class="form-control" placeholder="Họ và tên"
                                        :class="{ 'is-invalid': errors.fullName }" />
                                    <div class="invalid-feedback">{{ errors.fullName }}</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Email</label>
                                    <Field name="email" type="email" class="form-control" placeholder="Email"
                                        :class="{ 'is-invalid': errors.email }" />
                                    <div class="invalid-feedback">{{ errors.email }}</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Số điện thoại</label>
                                    <Field name="phoneNumber" type="text" class="form-control"
                                        placeholder="Số điện thoại" :class="{ 'is-invalid': errors.phoneNumber }" />
                                    <div class="invalid-feedback">{{ errors.phoneNumber }}</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Địa chỉ</label>
                                    <Field name="address" type="text" class="form-control" placeholder="Địa chỉ"
                                        :class="{ 'is-invalid': errors.address }" />
                                    <div class="invalid-feedback">{{ errors.address }}</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Mật khẩu</label>
                                    <Field name="password" type="password" class="form-control" placeholder="Mật khẩu"
                                        :class="{ 'is-invalid': errors.password }" />
                                    <div class="invalid-feedback">{{ errors.password }}</div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Xác nhận mật khẩu</label>
                                    <Field name="confirmPassword" type="password" class="form-control"
                                        placeholder="Xác nhận mật khẩu"
                                        :class="{ 'is-invalid': errors.confirmPassword }" />
                                    <div class="invalid-feedback">{{ errors.confirmPassword }}</div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-main-primary btn-block"
                                        :disabled="isSubmitting">
                                        <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                                        Đăng ký
                                    </button>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';
import { useUserStore } from '@/stores';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const authStore = useUserStore();
const router = useRouter();

const schema = Yup.object().shape({
    username: Yup.string().required('Vui lòng nhập tên đăng nhập'),
    fullName: Yup.string().required('Vui lòng nhập họ và tên'),
    email: Yup.string().required('Vui lòng nhập email').email('Địa chỉ email chưa đúng'),
    phoneNumber: Yup.string().required('Vui lòng nhập số điện thoại').matches(/^(0|\+84)[0-9]{9,10}$/, 'Số điện thoại chưa đúng'),
    address: Yup.string().required('Vui lòng nhập địa chỉ'),
    password: Yup.string().required('Vui lòng nhập mật khẩu').min(6, 'Mật khẩu phải có ít nhất 6 ký tự').max(100, 'Mật khẩu không quá 100 ký tự'),
    confirmPassword: Yup.string().oneOf([Yup.ref('password'), null], 'Mật khẩu và xác nhận mật khẩu chưa khớp.').required('Vui lòng xác nhận mật khẩu'),
});

async function onSubmit(values) {
    const registerModel = {
        UserName: values.username,
        FullName: values.fullName,
        Email: values.email,
        PhoneNumber: values.phoneNumber,
        Address: values.address,
        Password: values.password,
        ConfirmPassword: values.confirmPassword,
    };
    const success = await authStore.register(registerModel);
    if (success) {
        // Đăng ký thành công, chuyển hướng về trang đăng nhập
        router.push('/dang-nhap');
    }
}
</script>