<template>
  <div class="row justify-around create-project">
    <q-card flat bordered class="card col-6">
      <q-card-section>
        <div class="card-header">Editar 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>
        <div class="actions-buttons">
          <q-btn @click="editProject" class="create-btn" label="Remover" no-caps/>
          <q-btn @click="editProject" class="create-btn" label="Salvar" no-caps/>
        </div>
      </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>
          <q-btn @click="changeStatus" class="attribute-btn" :label="getStatusBtnLabel()"
                 no-caps/>
        </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 lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
import ProjectService from "src/services/ProjectService";
import Project from "src/models/Project";

@Component
export default class EditProject extends Vue {
  @Prop({required: true, type: Object})
  projectData: any;
  projectForm: any = {}

  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';
  }

  getStatusBtnLabel() {
    return this.projectForm.situation === 'OPEN' ? 'Fechar Projeto': 'Abrir Projeto';
  }

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

  changeStatus() {
    return this.projectForm.situation === 'OPEN' ? 'CLOSED': 'OPEN';
  }

  async editProject() {
    const projectService = new ProjectService();
    const projectData = new Project(
      this.projectForm.name,
      this.projectForm.description,
      this.projectForm.adminId,
      this.projectForm.projectStatus,
      this.projectForm.visible
    );

    await projectService.update(projectData, this.projectData.id);
  }

  async removeProject() {
    const projectService = new ProjectService();
  }

  created() {
    this.projectForm = {
      name: this.projectData.name,
      description: this.projectData.description,
      visible: this.projectData.visible,
      situation: this.projectData.situation,
      adminId: this.$store.getters['login/getIdUsuario']
    }
  }
}
</script>
