<template>
  <div class="row justify-around create-project">
    <q-card flat bordered class="card col-6">
      <q-card-section>
        <div class="card-header">Criar Projeto</div>
      </q-card-section>
      <q-card-section class="form column justify-between items-center">
        <div class="fields">
          <div class="field">
            <q-input v-model="projectForm.name" color="orange" label="Nome"
                     ref="nameInput"
                     placeholder="Informe o nome"/>
          </div>
          <div class="field-text">
            <q-input v-model="projectForm.description" type="textarea" color="orange"
                     placeholder="Informe a descrição" label="Descrição" outlined
            />
          </div>
        </div>
        <q-btn @click="createProject" class="create-btn" label="Criar" no-caps/>
      </q-card-section>
    </q-card>

    <q-card flat bordered class="card col-4 project-attributes column items-center">
      <q-card-section>
        <div class="card-header">Atributos do Projeto</div>
      </q-card-section>
      <q-card-section class="fields column">
        <div class="field column">
          <p><span class="label">Status:</span> {{ projectStatus }}</p>
        </div>
        <div class="field column items-center">
          <p><span class="label">Visibilidade:</span> {{ projectVisibility }}</p>
          <q-btn @click="changeVisible" class="attribute-btn" :label="getVisibilityBtnLabel()"
                 no-caps/>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import {Vue, Component, Prop} from 'vue-property-decorator';
import ProjectService from "src/services/ProjectService";
import Project from "src/models/Project";

@Component
export default class CreateProject extends Vue {
  projectForm = {
    name: '',
    description: '',
    visible: false,
    situation: 'OPEN',
    adminId: this.$store.getters['login/getIdUsuario']
  }

  get projectStatus() {
    return this.projectForm.situation === 'OPEN' ? 'Aberto' : 'Fechado';
  }

  get projectVisibility() {
    return this.projectForm.visible ? 'Visível' : 'Invisível';
  }

  getVisibilityBtnLabel() {
    return this.projectForm.visible ? 'Tornar Invisível' : 'Tornar Visível';
  }

  changeVisible() {
    return this.projectForm.visible = !this.projectForm.visible;
  }

  async createProject() {
    const projectService = new ProjectService();
    const projectForm = new Project(
      this.projectForm.name,
      this.projectForm.description,
      this.projectForm.adminId,
      this.projectForm.situation,
      this.projectForm.visible
    );

    const projectIsCreated = await projectService.create(projectForm);

    if (projectIsCreated !== false) {
      this.$emit('projectCreated')
    }
  }
}
</script>
