<template>
  <section class="vh-100 gradient-custom login-form">
    <div class="container py-5 h-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col-12 col-md-8 col-lg-6 col-xl-5">
          <div class="card" :class="cardClasses">
            <div class="card-body px-5 text-center">
              <div class="mb-md-5 mt-md-4">
                <h2 class="fw-bold mb-2 text-uppercase">Login</h2>
                <p class="mb-5" :class="textClasses">Enter your username and password</p>

                <div class="form-floating mb-4" :class="formClasses">
                  <input
                    type="text"
                    id="floatingInput"
                    class="form-control form-control-lg"
                    v-model="username"
                    placeholder="name@example.com"
                  />
                  <label :class="labelClasses" for="floatingInput">Username</label>
                </div>

                <div class="form-floating mb-4" :class="formClasses">
                  <input
                    type="password"
                    id="floatingPassword"
                    class="form-control form-control-lg"
                    v-model="password"
                    placeholder="password"
                  />
                  <label :class="labelClasses" for="floatingPassword">Password</label>
                </div>

                <p v-if="forgotPassword" class="small mb-5 pb-lg-2">
                  <a :class="textClasses" href="#!" @click="onForgotPassword()">Forgot password?</a>
                </p>

                <button
                  :disabled="!canLogin"
                  :class="{ disabled: !canLogin }"
                  class="btn btn-outline-light btn-lg px-5"
                  type="submit"
                  @click="onLogin()"
                >
                  Login
                </button>

                <div class="d-flex justify-content-center text-center mt-4 pt-1" v-if="useOauth">
                  <a href="#!" :class="textClasses" @click="onOauth('facebook')"
                    ><i class="fab fa-facebook-f fa-lg"></i
                  ></a>
                  <a href="#!" :class="textClasses" @click="onOauth('twitter')"
                    ><i class="fab fa-twitter fa-lg mx-4 px-2"></i
                  ></a>
                  <a href="#!" :class="textClasses" @click="onOauth('google')"><i class="fab fa-google fa-lg"></i></a>
                </div>
              </div>

              <div v-if="canRegister">
                <p class="mb-0">
                  Don't have an account?
                  <a href="#!" class="fw-bold" :class="textClasses" @click="onRegister()">Sign Up</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

defineProps({
  canRegister: {
    type: Boolean,
    required: false,
    default: false,
  },
  forgotPassword: {
    type: Boolean,
    required: false,
    default: false,
  },
  useOauth: {
    type: Boolean,
    required: false,
    default: false,
  },
  formClasses: {
    type: String,
    default: 'form-white',
  },
  cardClasses: {
    type: String,
    default: 'bg-dark text-white',
  },
  labelClasses: {
    type: String,
    default: 'text-dark',
  },
  textClasses: {
    type: String,
    default: 'text-white-50',
  },
});
const emit = defineEmits(['forgot-password', 'login', 'register', 'oauth']);
const username = ref('');
const password = ref('');
const canLogin = computed(
  () => !!username.value && !!username.value.trim() && !!password.value && !!password.value.trim()
);
const onForgotPassword = () => emit('forgot-password');
const onRegister = () => emit('register');
const onLogin = () => emit('login', { username: username.value, password: password.value });
const onOauth = (provider: string) => emit('oauth', provider);
</script>

<style lang="scss">
.login-form {
  .card {
    border-radius: 1rem;
  }
}
</style>
