<script setup lang="ts">
import { ref } from "vue";
// import { useAuthStore } from '@/store/auth';
import { Form } from "vee-validate";

/*Social icons*/
import google from "@/assets/images/svgs/google-icon.svg";
import facebook from "@/assets/images/svgs/facebook-icon.svg";

const checkbox = ref(false);
const valid = ref(false);
const show1 = ref(false);
const password = ref("admin123");
const username = ref("info@wrappixel.com");
const passwordRules = ref([
  (v: string) => !!v || "Password is required",
  (v: string) =>
    (v && v.length <= 10) || "Password must be less than 10 characters"
]);
const emailRules = ref([
  (v: string) => !!v || "E-mail is required",
  (v: string) => /.+@.+\..+/.test(v) || "E-mail must be valid"
]);

function validate(values: any, { setErrors }: any) {
  // const authStore = useAuthStore();
  // return authStore.login(username.value, password.value).catch((error) => setErrors({ apiError: error }));
}
</script>

<template>
  <v-row class="d-flex mb-3">
    <v-col cols="6" sm="6" class="pr-2">
      <v-btn
        variant="outlined"
        size="large"
        class="border text-subtitle-1 font-weight-semibold hover-link-primary"
        block
      >
        <img :src="facebook" width="20" class="mr-1" alt="facebook" />
        <span class="d-md-flex d-none mr-1">Sign in with</span> Facebook
      </v-btn>
    </v-col>
    <v-col cols="6" sm="6" class="pl-2">
      <v-btn
        variant="outlined"
        size="large"
        class="border text-subtitle-1 font-weight-semibold hover-link-primary"
        blocks
      >
        <img :src="google" height="16" class="mr-2" alt="google" />
        <span class="d-md-flex d-none mr-1">Sign in with</span> Google
      </v-btn>
    </v-col>
  </v-row>
  <div class="d-flex align-center text-center mb-6">
    <div
      class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative"
    >
      <span class="bg-surface px-5 py-3 position-relative textSecondary"
        >Or sign in with email</span
      >
    </div>
  </div>
  <Form @submit="validate" v-slot="{ errors, isSubmitting }" class="mt-5">
    <v-label class="font-weight-semibold pb-2">Username</v-label>
    <VTextField
      v-model="username"
      :rules="emailRules"
      class="mb-8"
      required
      hide-details="auto"
    ></VTextField>
    <div class="d-flex justify-space-between align-center pb-2">
      <v-label class="font-weight-semibold">Password</v-label>
      <RouterLink
        to="/auth/forgot-password2"
        class="text-primary text-decoration-none font-weight-medium"
        >Forgot Password ?</RouterLink
      >
    </div>

    <VTextField
      v-model="password"
      :rules="passwordRules"
      required
      hide-details="auto"
      type="password"
      class="pwdInput"
    ></VTextField>
    <div class="d-flex flex-wrap align-center my-3 ml-n2">
      <v-checkbox
        class="pe-2"
        v-model="checkbox"
        :rules="[(v: any) => !!v || 'You must agree to continue!']"
        required
        hide-details
        color="primary"
      >
        <template v-slot:label class="font-weight-medium"
          >Keep me logged in</template
        >
      </v-checkbox>
    </div>
    <v-btn
      size="large"
      :loading="isSubmitting"
      color="darkgray"
      :disabled="valid"
      block
      type="submit"
      flat
      >Sign In</v-btn
    >
    <div v-if="errors.apiError" class="mt-2">
      <v-alert color="error">{{ errors.apiError }}</v-alert>
    </div>
  </Form>
</template>
