import {
  invalidCredentialsDialog,
  verificationRequiredDialog,
  alreadyRegisteredDialog,
  invalidDataDialog,
  registrationErrorDialog,
  checkEmailDialog,
  unknownEmailDialog,
  passwordResetSuccessDialog,
  verificationSuccessDialog,
  verificationFailedDialog,
  setUser,
  setTokenCookie,
  logoutDialog,
  useLang
} from 'quasar-ui-http-authentication'
import { Router } from 'vue-router'
import { ref, Ref } from 'vue'
import { useQuasar } from 'quasar'

export interface User {
  email: string
  username: string
  password: string
}

export const user = ref({})
export const roles = ref<unknown[]>([])

export const useLogin = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>, rememberMe?: boolean) => {
    loading.value = true
    return new Promise<{ user: Record<string, unknown>, token: string }>((resolve, reject) => {
      setTimeout(() => {
        resolve({
          user: {
            email: '[email protected]',
            roles: []
          },
          token: 'token'
        })
      }, 1000)
    }).then((res) => {
      result.value = res
      const { user, token } = res
      setUser(user)
      // setHeader() -- e.g. axios.defaults.headers.common.Authorization = `Bearer ${token}`
      setTokenCookie($q, token, rememberMe)
      return res
    }).catch((res: unknown) => {
      if (res === '401') return verificationRequiredDialog($q, {}, lang)
      if (res === '403') return invalidCredentialsDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

export const useLogout = ({ router }: { router: Router}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()

  const logout = () => logoutDialog($q, {
    onOk: () => router.push('/')
  }, lang)

  return logout
}

export const useRegister  = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      return res
    }).catch((res: unknown) => {
      if (res === '403') return invalidDataDialog($q, {}, lang)
      if (res === '409') return alreadyRegisteredDialog($q, {}, lang)
      return registrationErrorDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}


export const usePasswordForgot = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      checkEmailDialog($q, {
        onOk: () => router?.push('/login')
      }, lang)
      return res
    }).catch((res: unknown) => {
      return unknownEmailDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

export const usePasswordReset = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>, token: string) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      passwordResetSuccessDialog($q, {
        onOk: () => router?.push('/login')
      }, lang)
      return res
    }).catch((res: unknown) => {
      console.error(res)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

export const useVerify = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (token: string) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      verificationSuccessDialog($q, {
        onOk: () => router?.push('/login')
      }, lang)
      return res
    }).catch((res: unknown) => {
      return verificationFailedDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}