<template>
  <q-layout>
    <q-page-container>
      <q-page class="row panels justify-around">
        <q-card flat bordered class="col-5 column items-between items-center card-table">
          <h1>Algoritmos</h1>
          <q-table
            class="table-algorithms"
            :data="algorithmTable.data"
            :columns="algorithmTable.columns"
            row-key="name"
          >
            <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="addAlgorithmModal(props.row.id)" class="remove-btn" icon="add" color="orange"/>
                  <q-btn @click="editAlgorithmModal(props.row.id)" class="remove-btn" icon="edit" color="orange"/>
                  <q-btn @click="removeAlgorithm(props.row.id)" class="remove-btn" icon="remove" color="orange"/>
                </div>
              </q-td>
            </template>
          </q-table>
        </q-card>
        <q-card flat bordered class="col-5 column items-between items-center card-info">
          <h1>Dados do Algoritmo</h1>
          <div class="buttons-info column justify-between">
            <q-btn icon="local_offer" color="orange" label="Tags" no-caps/>
          </div>
        </q-card>
        <q-dialog v-model="editModal" persistent>
          <q-card class="algorithm-edit column items-center justify-between">
            <h1>Editar Algoritmo</h1>
            <div>
              <q-input v-model="newAlgorithm.name" label="Nome da Tag"/>
              <q-select v-model="newAlgorithm.typeRecommendation" :options="typeRecommendations" label="Tipo de Recomendação"/>
            </div>
            <q-card-actions>
              <q-btn flat label="Cancelar" color="orange" v-close-popup/>
              <q-btn flat @click="editAlgorithmData" label="Confirmar" color="orange" v-close-popup/>
            </q-card-actions>
          </q-card>
        </q-dialog>

        <q-dialog v-model="addModal" persistent>
          <q-card class="algorithm-edit column items-center justify-between">
            <h1>Adicionar Algoritmo</h1>
            <div>
              <q-input v-model="newAlgorithm.name" label="Nome da Algoritmo"/>
              <q-select v-model="newAlgorithm.typeRecommendation" :options="typeRecommendations" label="Tipo de Recomendação"/>
            </div>
            <q-card-actions>
              <q-btn flat label="Cancelar" color="orange" v-close-popup/>
              <q-btn flat @click="addAlgorithm" 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: 'Algorithm',
  data () {
    return {
      addModal: false,
      algorithmService: new BaseService('algorithms'),
      newAlgorithm: {
        name: '',
        typeRecommendation: ''
      },
      editModal: false,
      typeRecommendations: [
        'HYBRID',
        'CONTENT',
        'COLLABORATIVE'
      ],
      algorithmTable: {
        data: [],
        columns: [
          {
            name: 'name',
            label: 'Nome',
            field: 'name',
            align: 'center',
            sortable: true
          },
          {
            name: 'type',
            label: 'Tipo',
            field: 'typeRecommendation',
            align: 'center',
            sortable: true
          },
          {
            name: 'id',
            label: 'Operações',
            field: 'id',
            align: 'center',
            sortable: true
          }
        ]
      }
    }
  },
  methods: {
    async getAlgorithms () {
      const resp = await this.algorithmService.get()
      return resp._embedded && resp._embedded.algorithms ? resp._embedded.algorithms : []
    },
    async editAlgorithmModal (id) {
      this.newAlgorithm = await this.algorithmService.get(`${id}`)
      this.editModal = true
    },
    async addAlgorithmModal (id) {
      this.newAlgorithm = await this.algorithmService.get(`${id}`)
      this.addModal = true
    },
    async editAlgorithmData () {
      try {
        await this.algorithmService.put(`/${this.newAlgorithm.id}`, this.newAlgorithm)
        this.$q.notify({
          message: 'Algoritmo removido com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Houve um problema ao remover o Algoritmo',
          color: 'red',
          position: 'bottom-right'
        })
      }

      this.algorithmTable.data = await this.getAlgorithms()
    },
    async removeAlgorithm (id) {
      try {
        await this.algorithmService.delete(`/${id}`)
        this.$q.notify({
          message: 'Algoritmo removido com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Houve um problema ao remover o Algoritmo',
          color: 'red',
          position: 'bottom-right'
        })
      }

      this.algorithmTable.data = await this.getAlgorithms()
    },
    async addAlgorithm () {
      try {
        await this.algorithmService.post('', this.newAlgorithm)
        this.$q.notify({
          message: 'Algoritmo adicionado com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Houve um problema ao adicionar o Algoritmo',
          color: 'red',
          position: 'bottom-right'
        })
      }
      this.algorithmTable.data = await this.getAlgorithms()
    }
  },
  async mounted () {
    this.algorithmTable.data = await this.getAlgorithms()
  }
}
</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;
  }

  .algorithm-edit {
    width: 350px;
    height: 250px;
  }

  .table-algorithms {
    width: 85%;
  }

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

  .table-btn {
    width: 80%;
  }

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

  .buttons-info {
    margin-top: 15px;
    width: 80%;
  }

  .card-table {
    height: 550px;
  }

  .card-info {
    height: 150px;
  }
</style>