<template>
    <section class="mx-auto max-w-xl">
        <div class="ml-4 mt-4" @click="router.back">
            <SvgIcon name="allow-left" class="w-7 h-7" />
        </div>
        <div class="flex min-h-full flex-1 flex-col justify-center  sm:px-6 lg:px-8">
            <div class="sm:mx-auto sm:w-full sm:max-w-md">
                <img class="mx-auto w-80 h-24" :src="logo" />
                <h2 class=" text-center text-2xl font-bold leading-9
                 tracking-tight text-gray-900">{{ t('signUp.title') }}</h2>
            </div>
            <div class=" sm:mx-auto sm:w-full sm:max-w-[480px]">
                <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
                    <form class="space-y-6" @submit.prevent="onSubmit">
                        <div>
                            <label for="phone-number" class="block text-sm font-medium leading-6 text-gray-900">{{
                                t('signUp.p_n') }}</label>
                            <div class="relative mt-2 rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 flex items-center">
                                    <v-select :options="countries" label="localName" v-model="selectCountry"
                                        :clearable="false">
                                        <template v-slot:no-options="{ search, searching }">
                                            <template v-if="searching">
                                                {{ t('common.noResult') }}
                                            </template>
                                            <em v-else style="opacity: 0.5">Search</em>
                                        </template>
                                    </v-select>
                                </div>
                                <input type="number" name="phone-number" id="phone-number" v-model="formData.mobile"
                                    class="outline-none block w-full rounded-md border-0  py-1.5 pl-32 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                            </div>
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{
                                t('signUp.password') }}</label>
                            <div class="mt-2">
                                <input id="password" name="password" type="password" autocomplete="current-password"
                                    v-model="formData.password" required
                                    class="outline-none block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                            </div>
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{
                                t('signUp.c_p') }}</label>
                            <div class="mt-2">
                                <input id="password2" name="password2" type="password" required v-model="formData.password2"
                                    class="outline-none block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                            </div>
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">{{
                                t('signUp.i_c') }}</label>
                            <div class="mt-2">
                                <input id="invitationCode" name="invitationCode" type="number" 
                                    v-model="formData.invitationCode" required
                                    class="outline-none block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6" />
                            </div>
                        </div>
                        <div class="flex items-start mb-6">
                            <div class="flex items-center h-5">
                                <input id="terms" type="checkbox" v-model="formData.terms"
                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-[#ee946b] dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-[#ee946b] dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
                                    required>
                            </div>
                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ t('signUp.i_green')
                            }}<a @click="showTermsModal" class="text-[#F96825] hover:underline dark:text-[#F96825]">{{
    t('signUp.r_a') }}</a></label>
                        </div>
                        <div>
                            <button type="submit"
                                class="flex w-full justify-center rounded-md bg-[#F96825] px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-[#F96825] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#F96825]">{{
                                    t('signUp.sign_up') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <TermsModal ref="termsModalRef" @accept="accept" @decline="decline" />
        <Dialog ref="dialogRef" />
        <Dialog ref="dialogRef2" @confirm="toSignIn" />
    </section>
</template>

<script setup lang="ts" >
import { onMounted, ref } from 'vue';
import { signUp } from '@/api/auth'
import TermsModal from '@/components/TermsModal.vue'
import { useRoute, useRouter } from 'vue-router';
import Dialog from '@/components/Dialog.vue'
import SvgIcon from '@/components/SvgIcon.vue';
import { listCountry } from '@/api/countries'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';
import * as PageUtils from '@/utils/pageUtils'

const logo  = ref('')

const router = useRouter()
const route = useRoute()
// ref
const termsModalRef = ref()
const dialogRef = ref()
const dialogRef2 = ref()
const countries = ref([])
const selectCountry = ref('')
const initCountries = async () => {
    const res = await listCountry() as any
    res.forEach((item: any) => {
        countries.value.push(item)
    })
}


const changeCountry = () => {
}
const formData = ref({
    countryCode: '',
    mobile: '',
    password: '',
    password2: '',
    invitationCode: '',
    terms: false,
    rememberMe: false
})

const onSubmit = async () => {
    formData.value.countryCode = selectCountry.value.phoneCode
    if(!formData.value.countryCode) {
        dialogRef.value.open({
            type: 'warning',
            showCancelButton: false,
            confirmText: 'Confirm',
            content: t('signUp.no_select_country')
        })
    }
    const res = await signUp(formData.value) as any
    const code = res.code
    if (code === 1004001003) {
        dialogRef.value.open({
            type: 'warning',
            showCancelButton: false,
            confirmText: 'Confirm',
            content: t('signUp.number_exist')
        })
        return
    }
    if(code === 1004001006) {
        dialogRef.value.open({
            type: 'warning',
            showCancelButton: false,
            confirmText: 'Confirm',
            content: t('signUp.no_select_country')
        })
    }
    if (code === 1004001008) {
        dialogRef.value.open({
            type: 'warning',
            showCancelButton: false,
            confirmText: 'Confirm',
            content: t('signUp.i_code_not_exist')
        })
        return
    }
    if (code != 0) {
        dialogRef.value.open({
            type: 'warning',
            showCancelButton: false,
            confirmText: 'Confirm',
            content: t('signUp.number_exist')
        })
    } else {
        dialogRef2.value.open({
            type: 'success',
            showCancelButton: false,
            confirmText: t('signUp.to_sign_in'),
            content: t('signUp.sign_up_success')
        })

    }
}

const toSignIn = () => {
    router.push({ name: 'signIn' })
}

const showTermsModal = () => {
    termsModalRef.value.showTerms()
}

const accept = () => {
    formData.value.terms = true
}

const decline = () => {
    formData.value.terms = false
}

onMounted(async () => {
    const config = await PageUtils.getH5PagesConfig()
    logo.value =  config.logo
    formData.value.invitationCode = route.query.invitationCode as string
    await initCountries()
    selectCountry.value = countries.value[0]
})

</script>


<style scoped>
#terms {
    color: #F96825;
}

:deep(.vs__dropdown-toggle) {
    width: 120px;
    height: 35px;
    --vs-border-width: 0px;
}</style>