<template>
  <div class="home">
    <header class="profile-header">
      <h2>My Profile</h2>
      <hr />
      <h2>Profile for {{ user.name }}</h2>
      <p>Inscrit le {{ registerDateFr }}</p>
    </header>

    <div v-if="user.avatar">
      <img :src="user.avatar" alt="" class="avatar" />
    </div>

    <div v-if="user.repos">
      {{ user.name }} possède {{ user.repos.length }} repos.
    </div>

    <div class="how-old">
      <div v-if="user.age >= 20">
        <p>Âge : {{ user.age }} (Extrêmement vieux)</p>
      </div>
      <div v-else-if="user.age >= 10 && user.age <= 20">
        <p>Âge : {{ user.age }} (Enfant)</p>
      </div>
      <div v-else>
        <p>Âge : {{ user.age }} (Doué pour utiliser un clavier)</p>
      </div>
      <div class="change-age">
        <input type="number" v-model="user.age" min="1" max="999" />
        <button>Devenir jeune</button>
        <button>Devenir vieux</button>
      </div>
    </div>

    <div class="my-friends">
      <div class="friend-list">
        <h2>Friends of {{ user.name }}</h2>
        <table>
          <thead>
            <tr>
              <th scope="col">Nom</th>
              <th scope="col">UUID</th>
              <th scope="col">Supprimer l'ami</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="friend in user.friends" :key="friend.uuid">
              <td>{{ friend.name }}</td>
              <td>{{ friend.uuid }}</td>
              <td>
                <button @click="removeFriend(friend.uuid)">
                  Détruire l'ami là
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <form class="friend-actions" @submit.prevent="addFriend(inputFriend)">
        <input type="text" v-model="inputFriend.name" />
        <button type="submit">Ajouter l'ami</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import axios from "axios";

export default defineComponent({
  name: "Profile",

  data() {
    return {
      user: {
        name: "Alexis",
        avatar: null,
        age: 21,
        repos: [],
        registerDate: "2020-10-30",
        friends: [
          {
            uuid: "91261477-04fb-4052-8ef9-6041ad7afb7e",
            name: "Me"
          },
          {
            uuid: "c25880c8-4f04-432a-97bf-df639fff36e6",
            name: "Myself"
          },
          {
            uuid: "1cb4cdaf-6a37-49d4-a069-b8a516203cbd",
            name: "I"
          }
        ]
      },
      inputFriend: {
        uuid: "bc59c1c9-b5a0-4047-a21e-afd1efcc4b64", // should be random but hey, this should be a token anyways so
        name: ""
      }
    };
  },

  computed: {
    registerDateFr(): any {
      const data = new Date(this.user.registerDate);
      const date = {
        day: data.getDate(),
        month: data.getUTCMonth() + 1,
        year: data.getFullYear()
      };
      return `${date.day}/${date.month}/${date.year}`;
    }
  },

  methods: {
    addFriend() {
      if (this.inputFriend.name) {
        this.user.friends.push({ ...this.inputFriend });
        this.inputFriend.name = "";
      } else {
        // todo: error handling
      }
    },

    removeFriend(uuid: string) {
      this.user.friends = this.user.friends.filter(
        friend => friend.uuid != uuid
      );
    }
  },

  created() {
    axios
      .get("https://api.github.com/users/alexisnp")
      .then(res => {
        this.user.avatar = res.data.avatar_url;
      })
      .catch(err => {
        console.log(err);
      });
    axios
      .get("https://api.github.com/users/alexisnp/repos")
      .then(res => {
        this.user.repos = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
});
</script>

<style lang="scss">
.avatar {
  display: block;
  border-radius: 50%;
  max-width: 250px;
  max-height: 250px;
}
</style>
