<template>
  <div>
    <v-img
        class="mx-auto my-6"
        max-width="228"
        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"
    ></v-img>

    <v-card
        class="mx-auto pa-12 pb-8"
        elevation="8"
        max-width="448"
        rounded="lg"
    >
      <!--      <div class="text-subtitle-1 text-medium-emphasis">Account</div>-->

      <v-text-field
          density="compact"
          placeholder="Email address"
          prepend-inner-icon="mdi-email-outline"
          variant="outlined"
      ></v-text-field>

      <!--      <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">-->
      <!--        Password-->

      <!--        <a-->
      <!--            class="text-caption text-decoration-none text-blue"-->
      <!--            href="#"-->
      <!--            rel="noopener noreferrer"-->
      <!--            target="_blank"-->
      <!--        >-->
      <!--          Forgot login password?</a>-->
      <!--      </div>-->

      <v-text-field
          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
          :type="visible ? 'text' : 'password'"
          density="compact"
          placeholder="Enter your password"
          prepend-inner-icon="mdi-lock-outline"
          variant="outlined"
          @click:append-inner="visible = !visible"
      ></v-text-field>

      <v-card
          class="mb-6"
          color="surface-variant"
          variant="tonal"
      >
        <!--        <v-card-text class="text-medium-emphasis text-caption">-->
        <!--          Warning: After 3 consecutive failed login attempts, you account will be temporarily locked for three hours. If you must login now, you can also click "Forgot login password?" below to reset the login password.-->
        <!--        </v-card-text>-->
      </v-card>

      <v-btn
          class="mb-8"
          color="blue"
          size="large"
          variant="tonal"
          block
          @click="login"
      >
        Log In
      </v-btn>
      <p>{{token}}</p>
      <p>{{ resAuth.data }}</p>


      <!--      <v-card-text class="text-center">-->
      <!--        <a-->
      <!--            class="text-blue text-decoration-none"-->
      <!--            href="#"-->
      <!--            rel="noopener noreferrer"-->
      <!--            target="_blank"-->
      <!--        >-->
      <!--          Sign up now <v-icon icon="mdi-chevron-right"></v-icon>-->
      <!--        </a>-->
      <!--      </v-card-text>-->
    </v-card>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {fetch} from "ofetch";
import {useRouter} from "#vue-router";
import {storeToRefs} from "pinia";
import {useCookie} from "#app";
import {useAuthentication} from "~/store/login";

const {auth} = useAuthentication()
const {resAuth} = storeToRefs(useAuthentication())
const visible = ref(false);
const router = useRouter()
const email = ref('');
const password = ref('');
const token = ref('')
const body = {
  'email': 'dgrimes@gmail.com',
  'password': '123',
}


const login = async () => {
  try {
    await auth(body);
  } catch (error) {
    console.log(error);
  }

  token.value = useCookie('token');
   navigateTo({
    path: '/homePage',
    // query: {
    //   token: useCookie('token')
    // }
  });

}



</script>