<template>
  <q-layout>
    <q-page-container>
      <q-page class="row panels justify-around">
        <q-card flat bordered class="col-6 column items-between items-center card-table">
          <h1>Itens: {{ project.name }}</h1>
            <q-table
              class="table-itens"
              :data="tableItens.data"
              :columns="tableItens.columns"
              row-key="id"
            >
              <template v-slot:body-cell-id="props">
                <q-td key="id" class="row justify-center" :props="props">
                  <div class="row table-btn justify-around">
                    <q-btn @click="addItemModal" class="remove-btn" icon="add" color="orange"/>
                    <q-btn @click="editItensModal(props.row.id)" class="remove-btn" icon="edit" color="orange"/>
                    <q-btn @click="removeItem(props.row.id)" class="remove-btn" icon="remove" color="orange"/>
                  </div>
                </q-td>
              </template>
            </q-table>
        </q-card>
        <div class="info-panels column
        col-5 justify-between">
          <q-card flat bordered class="col-5 column content-center card">
            <h1>Dados do Item</h1>
            <div class="buttons-info column justify-between">
              <q-btn icon="local_offer" color="orange" label="Tags" no-caps />
              <q-btn icon="emoji_objects" color="orange" label="Recomendações" no-caps />
              <q-btn icon="edit" color="orange" label="Avaliações" no-caps />
            </div>
          </q-card>
          <q-card flat bordered class="col-5 column content-center card">
            <h1>Atributos</h1>
            <q-table
              :data="tableAttributes.data"
              :columns="tableAttributes.columns"
              row-key="name"
            >
            </q-table>
            <p>Campos com (<span>*</span>) são obrigatórios</p>
          </q-card>
        </div>

        <q-dialog v-model="editItensModalValue" persistent>
          <q-card class="item-edit column items-center justify-between">
            <h1>Editar Item</h1>
            <div class="column">
              <q-input v-model="newItem.name" label="Nome"/>
              <q-input v-model="newItem.description" label="Descrição"/>
              <q-input v-model="newItem.projectId" label="Id do Projeto (Provisório)"/>
            </div>
            <q-card-actions>
              <q-btn flat label="Cancelar" color="orange" v-close-popup/>
              <q-btn flat @click="editItem" label="Confirmar" color="orange" v-close-popup/>
            </q-card-actions>
          </q-card>
        </q-dialog>

        <q-dialog v-model="addItensModalValue" persistent>
          <q-card class="item-edit column items-center justify-between">
            <h1>Adicionar Item</h1>
            <div class="column">
              <q-input v-model="newItem.name" label="Nome"/>
              <q-input v-model="newItem.description" label="Descrição"/>
              <q-input v-model="newItem.projectId" label="Id do Projeto (Provisório)"/>
            </div>
            <q-card-actions>
              <q-btn flat label="Cancelar" color="orange" v-close-popup/>
              <q-btn flat @click="addItem" label="Confirmar" color="orange" v-close-popup/>
            </q-card-actions>
          </q-card>
        </q-dialog>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import BaseService from 'src/services/BaseService'

export default {
  name: 'Itens',
  data () {
    return {
      editItensModalValue: false,
      addItensModalValue: false,
      newItem: {
        name: '',
        description: '',
        projectId: 1
      },
      itensService: new BaseService('itens'),
      project: {
        name: 'Find Music'
      },
      tableItens: {
        data: [],
        columns: [
          {
            name: 'name',
            label: 'Nome',
            field: 'name',
            align: 'center',
            sortable: true
          },
          {
            name: 'id',
            label: 'Operações',
            field: 'id',
            align: 'center',
            sortable: true
          }
        ]
      },
      tableAttributes: {
        data: [
          {
            name: 'Wish You Were Here',
            value: 'Rock'
          }
        ],
        columns: [
          {
            name: 'name',
            label: 'Nome',
            field: 'name',
            align: 'center',
            sortable: true
          },
          {
            name: 'value',
            label: 'Valor',
            field: 'value',
            align: 'center',
            sortable: true
          }
        ]
      }
    }
  },
  methods: {
    async getItens () {
      const resp = await this.itensService.get('')
      return resp._embedded && resp._embedded.itens ? resp._embedded.itens : []
    },
    async editItensModal (id) {
      this.newItem = await this.itensService.get(`${id}`)
      this.editItensModalValue = true
    },
    async removeItem (id) {
      try {
        await this.itensService.delete(`/${id}`)
        this.$q.notify({
          message: 'Item removido com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Houve um problema ao remover o Item',
          color: 'red',
          position: 'bottom-right'
        })
      }

      this.tableItens.data = await this.getItens()
    },
    async addItemModal () {
      this.addItensModalValue = true
    },
    async editItem () {
      const data = {
        name: this.newItem.name,
        description: this.newItem.description,
        projectId: this.newItem.projectId
      }

      await this.itensService.put(`/${this.newItem.id}`, data)
      try {
        this.$q.notify({
          message: 'Item editado com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Houve um problema ao editar o Item',
          color: 'red',
          position: 'bottom-right'
        })
      }

      this.tableItens.data = await this.getItens()
    },
    async addItem () {
      const data = {
        name: this.newItem.name,
        description: this.newItem.description,
        projectId: this.newItem.projectId
      }

      try {
        await this.itensService.post('', data)
        this.$q.notify({
          message: 'Item adicionado com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Houve um problema ao adicionar o Item',
          color: 'red',
          position: 'bottom-right'
        })
      }

      this.tableItens.data = await this.getItens()
    }
  },
  async mounted () {
    this.tableItens.data = await this.getItens()
  }
}
</script>

<style lang="scss" scoped>
  h1 {
    font-size: 1.2em;
    font-weight: 500;
    color: $gunmetal;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 3rem;
  }

  .remove-btn {
    display: flex;
    width: 35px;
    height: 35px;
    font-size: 0.8em;
    border-radius: 40px;
  }

  .table-btn {
    width: 60%;
  }

  .card {
    height: 250px;
  }

  .q-card {
    border-radius: 20px;
  }

  .table-itens {
    width: 85%;
    margin-top: 10px;
  }

  .info-panels {
    height: 550px;
  }

  .card-table {
    height: 550px;
  }

  .buttons-info {
    margin-top: 10px;
    height: 130px;
  }

  .item-edit {
    height: 300px;
    width: 350px;
  }

  p {
    margin-top: 15px;
    font-size: 0.8em;
    text-align: center;
  }

  span {
    color: $yellow-orange-color-wheel;
  }
</style>