<template>
  <div id="app">
    <nav-bar
      @show-sign-up-modal="showSignUpModal"
      @show-log-in-modal="showLogInModal"
      @show-profile-modal="showProfileModal"
    ></nav-bar>
    <router-view />
    <the-sign-up-modal
      v-if="signUp"
      class="modal"
      @hide-sign-up-modal="hideSignUpModal"
      @show-log-in-modal="showLogInModal"
    />
    <the-log-in-modal
      v-if="logIn"
      class="modal"
      @hide-log-in-modal="hideLogInModal"
      @show-sign-up-modal="showSignUpModal"
    ></the-log-in-modal>
    <the-profile-modal v-if="profileModal"></the-profile-modal>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import TheSignUpModal from "@/components/TheSignUpModal.vue";
import TheLogInModal from "@/components/TheLogInModal.vue";
import TheProfileModal from "@/components/TheProfileModal.vue";

export default {
  name: "App",
  data() {
    return {
      signUp: false,
      logIn: false,
      profileModal: false,
    };
  },
  components: { NavBar, TheSignUpModal, TheLogInModal, TheProfileModal },
  methods: {
    showSignUpModal(data) {
      this.signUp = data;
    },
    showLogInModal(data) {
      this.logIn = data;
    },
    hideSignUpModal(data) {
      this.signUp = data;
    },
    hideLogInModal(data) {
      this.logIn = data;
    },
    showProfileModal(data) {
      this.profileModal = data;
    },
  },
};
</script>