import { ISignupIscrizioneArcadeiOptions, ISignupIscrizioneConacreisOptions } from 'model'
import { tools } from '@store/Modules/tools'

import { Logo } from '@/components/logo'
import { CDate } from '@/components/CDate'
import { CMyPage } from '@/components/CMyPage'
import { CMySelect } from '@/components/CMySelect'

import { CTitleBanner } from '../CTitleBanner'
import { computed, defineComponent, reactive, ref, watch } from 'vue'
import { useQuasar } from 'quasar'
import { useUserStore } from '@store/UserStore'
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@store/globalStore'
import { useI18n } from '@/boot/i18n'
import MixinUsers from '@/mixins/mixin-users'
import useVuelidate from '@vuelidate/core'
import { email, minLength, required } from '@vuelidate/validators'

import { shared_consts } from '@src/common/shared_vuejs'

// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'

export default defineComponent({
  name: 'CSignUpIscrizioneArcadei',
  components: { Logo, CTitleBanner, CDate, CMyPage, CMySelect },

  setup() {
    const $q = useQuasar()
    const userStore = useUserStore()
    const $router = useRouter()
    const globalStore = useGlobalStore()
    const { t } = useI18n()

    const validations: any = computed(() => {
      let valid: any = {
          name: {
            required
          },
          surname: {
            required
          },
          email: {
            email,
            required
          },
          cell_phone: {
            required
          },
          cell_phone2: {
          },
          doctype: {
            required
          },
          residency_address: {
            required
          },
          residency_city: {
            required
          },
          residency_province: {
            required
          },
          residency_zipcode: {
            required
          },
          dateofbirth: {
            required
          },
          born_city: {
            required
          },
          born_province: {
            required
          },
          born_country: {
            required
          },
          metodo_pagamento: {
            required
          },
          terms: {
            required
          },
          quota_versata: {
            required
          },
      }
      return valid
    })

    const countryname = ref('')
    const countryborn = ref('')
    const iamadult = ref(false)

    const duplicate_email = ref(false)
    const duplicate_username = ref(false)

    const { mySurname, Email, myCell } = MixinUsers()

    const { getMyUsername } = MixinUsers()

    const signup = reactive({
      accetta_carta_costituzionale_on: false,
      newsletter_on: false,
      terms: false
    } as ISignupIscrizioneArcadeiOptions)

    // @ts-ignore
    const v$ = useVuelidate(validations, signup)

    const pagetesti_iscriz = ref(null)

    async function created() {
      if (!!getMyUsername() && (!userStore.my.profile.socio)) {
        signup.name = userStore.my.name
        signup.surname = mySurname()
        signup.email = Email()
        signup.cell_phone = myCell()
      }
      signup.categorie_interesse = []
      v$.value.$reset()

      pagetesti_iscriz.value = await globalStore.loadPage('/testi_iscriz')
    }

    function allowSubmit() {

      const error = v$.value.$error || v$.value.$invalid

      // console.log('v', v$, 'error', error, 'terms', signup.terms, 'carta', signup.accetta_carta_costituzionale_on)
      return !error && signup.terms && signup.accetta_carta_costituzionale_on
    }

    function errorMsg(cosa: string, item: any) {
      try {
        if (!item.$error) {
          return ''
        }
        console.log('item', item)
        // console.log('errorMsg', cosa, item)
        if (item.$params.email && !item.email) {
          return t('reg.err.email')
        }

        // console.log('item', item)

        if (item.minLength !== undefined) {
          if (!item.minLength) {
            return t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + t('reg.err.char')
          }
        }
        if (item.complexity !== undefined) {
          if (!item.complexity) {
            return t('reg.err.complexity')
          }
        }
// if (!item.maxLength) { return t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + t('reg.err.char') }

        if (item.required !== undefined) {
          if (!item.required) {
            return t('reg.err.required')
          }
        }

        // console.log('    ....avanti')
        if (cosa === 'email') {
          // console.log("EMAIL " + item.isUnique);
          // console.log(item);
          if (!item.isUnique) {
            return t('reg.err.duplicate_email')
          }
        } else if (cosa === 'username') {
          // console.log(item);
          console.log('username')
          console.log(item.$error)
          if (!item.isUnique) {
            return t('reg.err.duplicate_username')
          }
        } else if ((cosa === 'name') || (cosa === 'surname')) {
          // console.log(item);
        }

        return ''
      } catch (error) {
        // console.log("ERR : " + error);
      }
    }

    function submitOk() {
      v$.value.$touch()

      if (signup) {
        signup.email = tools.removespaces(signup.email!)
        signup.email = signup.email.toLowerCase()

        signup.residency_country = tools.CapitalizeAllWords(signup.residency_country)
        signup.residency_address = tools.CapitalizeAllWords(signup.residency_address)
        signup.residency_city = tools.CapitalizeAllWords(signup.residency_city)
        signup.residency_province = signup.residency_province!.toUpperCase()
        signup.born_province = signup.born_province!.toUpperCase()

        duplicate_email.value = false
        duplicate_username.value = false

        if (!signup.terms) {
          tools.showNotif($q, t('reg.err.terms'))
          return
        }

        if (!signup.accetta_carta_costituzionale_on) {
          tools.showNotif($q, t('reg.err.accetta_carta_costituzionale_on'))
          return
        }

        if (v$.value.$error) {
          tools.showNotif($q, t('reg.err.errore_generico'))
          return
        }

        signup.name = tools.CapitalizeAllWords(signup.name)
        signup.surname = tools.CapitalizeAllWords(signup.surname)
        signup.annoTesseramento = 2023

        $q.loading.show({ message: t('reg.iscrizioneincorso') })

        console.log(signup)
        return userStore.iscrivitiArcadei(tools.clone(signup))
          .then((ris) => {
            if (tools.SignUpcheckErrors($q, $router, ris.code, ris.msg))
              $q.loading.hide()
          }).catch((error: any) => {
            console.log('ERROR = ' + error)
            $q.loading.hide()
          })

      }
    }

    function selectcountry({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
      // console.log(name, iso2, dialCode)
      signup.residency_country = name
      countryname.value = name
    }

    function selectcountryborn({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
      // console.log(name, iso2, dialCode)
      signup.born_country = name
      countryborn.value = name
    }

    created()

    return {
      tools,
      selectcountryborn,
      selectcountry,
      submitOk,
      errorMsg,
      allowSubmit,
      signup,
      v$,
      pagetesti_iscriz,
      shared_consts,
    }

  }


})