<template>
  <q-page class="column items-center justify-center page">
    <div v-show="initialMenuIsVisible" class="initial-menu-buttons row justify-around">
      <div @click="createNewProject" class="project-btn column items-center">
        <q-icon name="add_circle"/>
        <span>Criar Projeto</span>
      </div>
      <div @click="showListProjectsPage" class="project-btn column items-center">
        <q-icon name="edit"/>
        <span>Listar Existentes</span>
      </div>
    </div>

    <div class="row justify-around create-project" v-if="createProjectIsVisible">
      <CreateProject @projectCreated="hideCreateProjectPageAndShowList"></CreateProject>
    </div>

    <div class="row justify-around create-project" v-if="listProjectsIsVisible">
      <ListProjects @editProject="showEditProjectPage"/>
    </div>

    <div class="row justify-around create-project" v-if="editProjectIsVisible">
      <EditProject :projectData="projectEditInfo" />
    </div>
  </q-page>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import CreateProject from './projects/CreateProject.vue';
import ListProjects from './projects/ListProjects.vue';
import EditProject from "pages/projects/EditProject.vue";

@Component({
  components: {CreateProject, ListProjects, EditProject}
})
export default class Projects extends Vue {
  initialMenuIsVisible: boolean = true;
  createProjectIsVisible: boolean = false;
  listProjectsIsVisible: boolean = false;
  editProjectIsVisible: boolean = false;
  projectEditInfo: any = {};

  hideInitialMenu() {
    this.initialMenuIsVisible = false;
  }

  showCreateProjectPage() {
    this.hideInitialMenu();
    this.createProjectIsVisible = true;
  }

  showListProjectsPage() {
    this.hideInitialMenu();
    this.listProjectsIsVisible = true;
    this.editProjectIsVisible = false;
  }

  hideCreateProjectPageAndShowList() {
    this.hideInitialMenu();
    this.createProjectIsVisible = false;
    this.editProjectIsVisible = false;
    this.listProjectsIsVisible = true;
  }

  showEditProjectPage(projectInfo: any) {
    this.hideInitialMenu();
    this.createProjectIsVisible = false;
    this.editProjectIsVisible = true;
    this.listProjectsIsVisible = false;

    this.projectEditInfo = projectInfo;
  }

  createNewProject() {
    this.showCreateProjectPage();
  }
}
</script>
