<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"
    >

      <v-text-field
          v-model="user_name"
          density="compact"
          placeholder="User Name"
          prepend-inner-icon="mdi-account-key-outline"
          variant="outlined"
      ></v-text-field>

      <v-text-field
          v-model="name"
          density="compact"
          placeholder="User Name"
          prepend-inner-icon="mdi-account-circle-outline"
          variant="outlined"
      ></v-text-field>

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

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


<!--      <v-text-field-->
<!--          v-model:value="password"-->
<!--          :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>

      <v-btn
          class="mb-8"
          color="blue"
          size="large"
          variant="tonal"
          block
          @click="register"
      >
        Register
      </v-btn>

    </v-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {fetch} from "ofetch";
import {useRouter} from "#vue-router";

const  router=useRouter();
const visible = ref(false);
const user_name = ref('');
const name = ref('');
const email = ref('');
const password = ref('');

const register = async () => {
  console.log(user_name.value);
  console.log(name.value);
  console.log(email.value);
  console.log(password.value);
  const response=await fetch('http://127.0.0.1:8000/api/register', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      "name": name.value,
      "user_name": user_name.value,
      "email": email.value,
      // "password": "123"
      "password": password.value
    })
  });
console.log(response.status)
  if (response.status != 200) {
      console.log('gagal');
  }else{
    await router.push('/login');

  }
}
</script>