<script lang="ts">
  import { getContext } from "svelte";
  import { dashBoardRequest } from "../../requests/auth.request";
  import Section from "../../components/auth/Section.svelte";
  import InfoForm from "../../components/auth/InfoForm.svelte";
  import RoomList from "../../components/auth/RoomList.svelte";
  import type { User } from "../../types/auth.type";
  import type { Writable } from "svelte/store";
  import { writable } from "svelte/store";
  import PasswordForm from "../../components/auth/PasswordForm.svelte";
  import { updatePassword, updateUserRequest } from "../../requests/auth.request.js";
  import UserConfirm from "../../components/auth/UserConfirm.svelte";
  import MdInfo from "svelte-icons/md/MdInfo.svelte";
  import FaUsers from "svelte-icons/fa/FaUsers.svelte";
  import FaUserLock from "svelte-icons/fa/FaUserLock.svelte";
  import { goto } from "$app/navigation";

  let u = "";
  let p = "";
  const user: Writable<User | null> = writable(null);
  const { logout, username, isAuth, initialLoading } = getContext("auth");

  $: !$initialLoading && $isAuth && dashBoardRequest().then((res) => {
    console.log(res);
    user.set(res);
  });
  const { show, close } = getContext("modal");
  const { success, error } = getContext("notif");
  let passwordForm = null;
  let infoForm = null;

  $: !$initialLoading && !$isAuth && goto("/");

</script>

<div>
  {#if $user != null}
    <h1>Mon compte</h1>
    <Section title="Mes informations" icon={MdInfo} onValidate={()=>{
            if(infoForm == null) return
            updateUserRequest($infoForm.summary).then(res=>{
                user.update((o)=>{return {...o,...res}})
                success("Mis a jour", "Informations mises à jour avec succès")
            }).catch(()=>{
                error("Erreur","Une erreur est survenue")
            })

        }} canValid={infoForm != null && $infoForm.valid}>
      <InfoForm user={$user} bind:myForm={infoForm} />
    </Section>
    <Section title="Salles" icon={FaUsers}>
      <RoomList rooms={$user.rooms} />
    </Section>
    <Section title="Sécurité" icon={FaUserLock} validate="Modifier mon mot de passe" onValidate={()=>{
            show(UserConfirm, {onValidate: ( p )=>{
            updatePassword({...$passwordForm.summary, old_password: p}).then((r)=>{
                localStorage.setItem("token", r.access_token)
                localStorage.setItem("refresh", r.refresh_token)
                close()
                success("Sécurité", "Mot de passe mises à jour avec succès")
            }).catch((e)=>{
                console.log('Erreur', e)
                error("Sécurité","Une erreur est survenue")
            })
            }, validate: "Changer mon mot de passe", cancel: close, cancelMsg: "Garder le mot de passe actuel"})

        }} canValid={passwordForm != null && $passwordForm.valid}>
      <PasswordForm bind:myForm={passwordForm} />
    </Section>
  {/if}

</div>

<style lang="scss">
  @import "../../mixins.scss";

  h1 {
    font-size: 3em;
    margin-bottom: 20px;
    @include down(800){
      text-align: center;
    }
  }

  div {
    padding: 7px 15px;
  }
</style>