<template>
  <div class="container is-fullwidth">
    <div class="loading" v-if="loading">
      <Loading />
    </div>
    <div class v-else>
      <h1 class="is-1">Under a complete remake.</h1>
      <h2 class="subtitle">Add a child from your homepage</h2>
    </div>
  </div>
</template>

<script lang="ts">
import { mapActions, mapGetters } from "vuex";
import Modal from "../../shared/components/Modal/Modal.vue";
import ChildCard from "../components/Child_Card.vue";
import Services from "../../services";
import FileSelect from "../../shared/components/FileSelect/FileSelect.vue";
import Loading from "../../shared/components/Loading/Loading.vue";
export default {
  components: {
    Modal,
    FileSelect,
    ChildCard,
    Loading
  },
  name: "Settings",
  async beforeCreate() {
    return true;
  },
  async created() {
    if (!this.user) {
      try {
        await this.getUser();
      } catch (e) {
        console.error("Failed to fetch user");
      }
    }

    this.loading = false;

    return true;
  },
  methods: {
    async addChild() {
      this.childValidation.enableInput = false;
      const childData = {
        name: this.childValidation.name,
        dob: this.childValidation.dob,
        avatar: this.childValidation.avatar
      };
      console.log(childData);
      const child = await Services.ApiService.createChild(
        childData.name,
        childData.dob,
        childData.avatar
      );
      if (childData.avatar) console.log(childData.avatar.length);
      this.childValidation.name = null;
      this.childValidation.dob = null;
      this.childValidation.avatar = null;
      this.childValidation.enableInput = true;

      this.enableChildModel = false;
      await this.getUser();
      this.notify({
        message: `Yay!, ${child.name} was cretated`,
        level: "success"
      });
      // console.log(child);
      return true;
    },
    ...mapActions(["getUser", "notify"])
  },
  computed: {
    ...mapGetters(["user"])
  },
  data() {
    return {
      loading: true,
      childValidation: {
        enableInput: true,
        name: null,
        dob: null,
        avatar: null
      },
      enableChildModel: false
    };
  }
};
</script>

