import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import { useMainStore } from '../store/main'
import { SubsonicApi, useSubsonicApi } from '../subsonicApi'

import { Logo } from '../components/Logo.vine'

export const LoginView = ({ returnTo = '/discover' }: { returnTo?: string }) => {
  const
    router = useRouter(),
    mainStore = useMainStore(),
    subsonicApi = useSubsonicApi(),

    staticServerUrl = import.meta.env.SERVER_URL ?? null,

    serverUrl = ref<string>(mainStore.serverUrl ?? ''),
    username = ref<string>(mainStore.serverCredentials?.username ?? ''),
    password = ref<string>(''),

    error = ref<Error | null>(null),
    displayForm = ref<boolean>(false),
    hasError = computed(() => error.value !== null),

    loginHandler = async() => {
      try {
        mainStore.isLoading = true
        error.value = null
        const auth = SubsonicApi.createAuth(username.value, password.value)

        subsonicApi.setServerUrl(staticServerUrl ?? serverUrl.value)
        subsonicApi.setAuth(auth)
        subsonicApi.initialize()

        const serverInfo = await subsonicApi.fetchServerInfo()

        mainStore.setServerUrl(staticServerUrl ?? serverUrl.value)
        mainStore.setServerCredentials(auth)
        mainStore.setServerInfo(serverInfo)

        router.replace(returnTo)
      } catch (err: any) {
        console.error(err)

        mainStore.isLoading = false
        error.value = err
      }
    }

  onMounted(
    () => {
      if (!mainStore.isAuthenticated()) {
        displayForm.value = true
      } else {
        router.replace(returnTo)
      }
    }
  )

  return vine`
    <div v-if="!displayForm" class="row justify-content-center">
      <span :aria-busy="true" />
    </div>
    <fieldset v-else class="login" :disabled="mainStore.isLoading">
      <form @submit.prevent="loginHandler">
        <div class="logo">
          <Logo />
        </div>

        <label v-if="!staticServerUrl">
          Server
          <input
            type="text"
            name="serverUrl"
            v-model.trim="serverUrl"
            :class="{'is-invalid': hasError}"
          >
        </label>

        <label>
          Username
          <input
            type="text"
            name="username"
            v-model="username"
            :class="{'is-invalid': hasError}"
          >
        </label>

        <label>
          Password
          <input
            type="password"
            name="password"
            v-model="password"
            :class="{'is-invalid': hasError}"
          >
        </label>

        <div v-if="error != null" class="alert">
          <span class="bold">Error:</span>
          {{ error.message }}
        </div>

        <button :disabled="mainStore.isLoading">
          <span :aria-busy="mainStore.isLoading"/> Log in
        </button>
        <div class="row justify-content-center">
          <a href="/app/">NavidromeUI</a>
        </div>
      </form>
    </fieldset>
  `;
}