<script setup>
import { useLayout } from "@/layout/composables/layout";
import { ref, computed } from "vue";
import AppConfig from "@/layout/AppConfig.vue";
import { useToast } from "primevue/usetoast";
import { AuthService } from "@/service/AuthService.js";
import { useRouter } from "vue-router";
import store from "@/store";

const authService = new AuthService();
const router = useRouter();
const { layoutConfig } = useLayout();
const toast = useToast();
const loading = ref(false);
const initForm = {
  email: "",
  password: "",
  remember: false,
};
const formData = ref({ ...initForm });
const logoUrl = computed(() => {
  return `/layout/images/${
    layoutConfig.darkTheme.value ? "logo-white" : "logo-dark"
  }.svg`;
});

const login = async () => {
  if (JSON.stringify(initForm) !== JSON.stringify(formData.value)) {
    loading.value = true;
    await axios.get("/sanctum/csrf-cookie");
    await axios
      .post("/login", formData.value)
      .then(({ data }) => {
        store.dispatch("auth/login");
        router.push({ name: "dashboard" });
      })
      .catch(({ response: { data } }) => {
        toast.add({
          severity: "error",
          summary: "Warning",
          detail: data.message,
          life: 3000,
        });
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
</script>

<template>
  <Toast />
  <div
    class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"
  >
    <div class="flex flex-column align-items-center justify-content-center">
      <!-- <img :src="logoUrl" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" /> -->
      <div
        style="
          border-radius: 56px;
          padding: 0.3rem;
          background: linear-gradient(
            180deg,
            var(--primary-color) 10%,
            rgba(33, 150, 243, 0) 30%
          );
        "
      >
        <div
          class="w-full surface-card py-8 px-5 sm:px-8"
          style="border-radius: 53px"
        >
          <div class="text-center mb-5">
            <div class="text-900 text-3xl font-medium mb-3">
              Welcome to CANTEEN!
            </div>
            <span class="text-600 font-medium">Sign in to continue</span>
          </div>

          <div>
            <label for="email1" class="block text-900 text-xl font-medium mb-2"
              >Email</label
            >
            <InputText
              id="email1"
              type="text"
              placeholder="Email address"
              class="w-full md:w-30rem mb-5"
              style="padding: 1rem"
              v-model="formData.email"
            />

            <label
              for="password1"
              class="block text-900 font-medium text-xl mb-2"
              >Password</label
            >
            <Password
              id="password1"
              v-model="formData.password"
              placeholder="Password"
              :toggleMask="true"
              class="w-full mb-3"
              inputClass="w-full"
              :inputStyle="{ padding: '1rem' }"
            ></Password>

            <div
              class="flex align-items-center justify-content-between mb-5 gap-5"
            >
              <div class="flex align-items-center">
                <Checkbox
                  v-model="formData.remember"
                  id="rememberme1"
                  binary
                  class="mr-2"
                ></Checkbox>
                <label for="rememberme1">Remember me</label>
              </div>
              <a
                class="font-medium no-underline ml-2 text-right cursor-pointer"
                style="color: var(--primary-color)"
                >Forgot password?</a
              >
            </div>
            <Button
              :label="loading? 'Logging In...' : 'Sign In'"
              @click="login"
              class="w-full p-3 text-xl justify-content-center"
            ></Button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <AppConfig simple />
</template>

<style scoped>
.pi-eye {
  transform: scale(1.6);
  margin-right: 1rem;
}

.pi-eye-slash {
  transform: scale(1.6);
  margin-right: 1rem;
}
</style>
