<template>
  <div
    :class="{ _loading: loading }"
    class="auth-login"
  >
    <AuthIcon class="auth-login__icon" />

    <UiInput
      v-model="form.username"
      :label="t('auth.username')"
      :placeholder="t('auth.username')"
      hide-label
      :error="error.username"
      name="login-name"
      enterkeyhint="next"
      @update:error="(val: boolean) => (error.username = val)"
      @enter="passwordRef?.focus()"
    />
    <UiInput
      ref="passwordRef"
      v-model="form.password_hash"
      :label="t('auth.password')"
      :placeholder="t('auth.password')"
      hide-label
      :error="error.password_hash"
      type="password"
      enterkeyhint="go"
      @update:error="(val: boolean) => (error.password_hash = val)"
      @enter="login"
    />

    <div class="auth-login__buttons">
      <UiBtn
        :disabled="loading"
        class="auth-login__login"
        wide
        size="l"
        theme="primary"
        @click="login"
      >{{ t("auth.log_in") }}
      </UiBtn>
      <button
        class="auth-login__forgot"
        type="button"
        @click="onForgotClick"
      >
        {{ t("auth.forgot") }}
      </button>

      <p class="auth-login__back">
        {{ t("register_text") }}
        <button
          class="auth-login__back-button"
          type="button"
          @click="onCreateClick"
        >
          {{ t("auth.sign_up") }}
        </button>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { validatePassword, validateUsername } from '../../runtime';
import { AuthorizationApiService } from '../../services/api/authorization.service';

const { t } = useI18n();

const passwordRef = ref();

const form = ref({
  username: '',
  password_hash: '',
});

const error = ref({
  username: false,
  password_hash: false,
});

const emit = defineEmits<{
  (eventName: 'forgot'): void;
  (eventName: 'create'): void;
}>();

function onForgotClick() {
  emit('forgot');
}

function onCreateClick() {
  emit('create');
}

const loading = ref(false);

const { setErrorState, showError, show, resetSnackbar } = useSnackbar();

async function login() {
  resetSnackbar();
  error.value.username = false;
  error.value.password_hash = false;

  if (!validateUsername(form.value.username)) {
    error.value.username = true;
    showError('error_username');
  }
  if (!validatePassword(form.value.password_hash)) {
    error.value.password_hash = true;
    showError('error_password');
  }

  if (!error.value.username && !error.value.password_hash) {
    try {
      loading.value = true;
      await useUser(AuthorizationApiService).login(form.value);
      useAuthPopup().closeAuthPopup();
      show('Welcome back!');
    } catch (error) {
      setErrorState(error);
    } finally {
      loading.value = false;
    }
  }
}
</script>

<style lang="scss">
.auth-login {
  row-gap: 16px;
  display: grid;
  align-items: start;

  @include from-br(sm) {
    row-gap: 8px;
  }
}

.auth-login._loading {
  @include from-br(sm) {
    cursor: wait;
  }
}

.auth-login__icon {
  margin: 0 auto;
}

.auth-login__buttons {
  display: grid;
  padding-top: 24px;
  border-top: 1px solid $auth-login-border;
}

.auth-login__login {
  margin-bottom: 16px;
}

.auth-login .ui-input:nth-last-child(1 of .ui-input) {
  padding-bottom: 12px;
}

.auth-login__back {
  @include font-sm;

  text-align: center;
  color: $auth-login-back;
}

.auth-login__back-button {
  color: $auth-login-back-link;

  @include hover(color) {
    color: $auth-login-back-link--hover;
  }
}

.auth-login__forgot {
  @include font-base;

  color: $auth-login-forgot;
  margin-bottom: 12px;
  padding-block: 8px;

  @include hover(color) {
    color: $auth-login-forgot--hover;
  }
}
</style>
