<script setup>

import i18n from "@/i18n.js";
import {uploadProfilePicture} from "@/rest/uploads.js";
import {postUser} from "@/rest/Users.js";
import {ref} from "vue";
let toCreate = Object.assign({},{})
const today =  new Date()
const date = today.getFullYear() +"-" + ("0" + (today.getMonth()+1)).slice(-2) + "-" + ("0" + today.getDate()).slice(-2);


async function createUser(){

  if (toCreate.lastName === null || toCreate.birthDate === null || toCreate.firstName === null ||
      toCreate.email === null || toCreate.address === null || toCreate.role === null || toCreate.password === null)
    return

  await postUser(toCreate)
  toCreate = Object.assign({},{})
}

async function getProfilePic(data){
  const pp= await uploadProfilePicture(data)
  toCreate.profilePictureUrl = pp.url
}

</script>

<template>
  <div class="body">
    <div class="container">
      <div class = "globalInfos">
        <div class="infosContainer">
          <ul>
            <li>{{i18n("LastName")}} : <input type="text" v-model="toCreate.lastName"></li>
            <li>{{i18n("FirstName")}} : <input type="text" v-model="toCreate.firstName"></li>
            <li> E-mail : <input type="text" v-model="toCreate.email"></li>
            <li>{{i18n("Country")}} : <input type="text" v-model="toCreate.country"></li>
            <li>{{i18n("Address")}} : <input type="text" v-model="toCreate.address"></li>
            <li>{{i18n("BirthDate")}} : <input type="date" min="1924-01-01" :max="date" v-model="toCreate.birthDate"></li>

            <li>{{i18n("Profile.Picture")}} :
              <input  type="file" @change="getProfilePic($event.target.files);" accept="image/*">
            </li>


            <li>{{i18n("Role")}} :
            <select  v-model="toCreate.role">
              <option value="Student">{{i18n("Student")}}</option>
              <option value="Teacher">{{i18n("Teacher")}}</option>
              <option value="Secretary">{{i18n("Secretary")}}</option>
              <option value="InscriptionService">{{i18n("InscriptionService")}}</option>
            </select>
            </li>

            <li>{{i18n("Password")}} : <input type="password" v-model="toCreate.password"></li>

          </ul>
          <div style="text-align: end"> <button id="createButton" @click="createUser"> {{i18n("Create.User")}}</button></div>
        </div>
    </div>
  </div>
  </div>
</template>

<style scoped>

.container{
  margin-top: 25px;
  min-width:675px;
  display:grid;
  grid-template-columns:10vw 50vw;
  grid-template-rows:200px auto;
  column-gap:2.7%;
  row-gap:45px;
  grid-template-areas:
  "profilPic globalInfos"
  "minfos minfos";
}
.globalInfos {
  grid-area:globalInfos;
  align-self :center;

}

.body {
  min-width:960px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:5%;
}


.infosContainer {
  border:2px solid black;
  font-size:23px;
  color:white;
  background-color:rgb(50,50,50);
  border-radius:10px;
}

#createButton{
  align-self: center;
  text-align: center;
  border: 2px solid black;
  color: white;
  font-size: x-large;
  background-color: #07bc0c;
  border-radius: 20px
}
#createButton:hover{
  background: #4cd964;
}

</style>