<template>
  <q-layout>
    <q-page-container>
      <q-page class="column">
        <div class="row justify-around info-panels">
          <q-card flat bordered class="col-6 column content-center card">
            <h1>Dados do Usuário</h1>
            <div class="row user-info">
              <div class="user-data-fields">
                <div class="field">
                  <span class="label">Nome: </span>
                  <span class="content">{{ selectedUser.name }}</span>
                </div>
                <div class="field">
                  <span class="label">Login: </span>
                  <span class="content">{{ selectedUser.login }}</span>
                </div>
                <div class="field">
                  <span class="label">Email: </span>
                  <span class="content">{{ selectedUser.email }}</span>
                </div>
              </div>
            </div>
          </q-card>

          <q-card flat bordered class="col-4 column content-center card">
            <h1>Informações do Usuário</h1>
            <div class="buttons-info column justify-between">
              <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>
        </div>

        <div class="row justify-center users-table">
          <q-card flat bordered class="col-11 column content-center card">
            <h1>Usuários</h1>
            <q-table
              :data="table.data"
              :columns="table.columns"
              selection="single"
              :selected.sync="selectedTable"
              row-key="id"
              class="table">
              <template v-slot:body-cell-id="props">
                <q-td key="id" :props="props">
                  <q-btn @click="removeUser(props.row.id)" class="remove-btn" icon="remove" color="orange"/>
                </q-td>
              </template>
            </q-table>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

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

export default {
  name: 'Users',
  computed: {
    selectedUser () {
      // eslint-disable-next-line no-undef
      if (this.selectedTable.length > 0) {
        return this.selectedTable[0]
      }
      return {
        name: '',
        login: '',
        email: ''
      }
    }
  },
  data () {
    return {
      usersService: new BaseService('users/evaluators'),
      selectedTable: [],
      table: {
        data: [],
        columns: [
          {
            name: 'name',
            label: 'Nome',
            field: 'name',
            align: 'center',
            sortable: true
          },
          {
            name: 'email',
            label: 'Email',
            field: 'email',
            align: 'center',
            sortable: true
          },
          {
            name: 'id',
            label: 'Remover',
            field: 'id',
            align: 'center'
          }
        ]
      }
    }
  },
  methods: {
    async getUsers () {
      const resp = await this.usersService.get()
      return resp._embedded && resp._embedded.evaluators ? resp._embedded.evaluators : []
    },
    async removeUser (id) {
      try {
        await this.usersService.delete(`/${id}`)
        this.$q.notify({
          message: 'Usuário removido com sucesso!',
          color: 'green',
          position: 'bottom-right'
        })
      } catch (e) {
        this.$q.notify({
          message: 'Não foi possível remover o Usuário',
          color: 'red',
          position: 'bottom-right'
        })
      }

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

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

  .users-table {
    height: 290px;
  }

  .buttons-info {
    height: 90px;
  }

  .table {
    margin-bottom: 20px;
  }

  .remove-btn {
    width: 40px;
    height: 40px;
    border-radius: 40px;
  }

  .user-info {
    width: 100%;
    margin-left: 15%;
  }

  .card {
    border-radius: 20px;
  }

  .info-panels {
    margin-bottom: 40px;
    height: 220px;
  }

  .user-data-fields {
    .field {
      width: 100%;
      margin-bottom: 10px;

      .label {
        font-weight: bold;
        color: $yellow-orange-color-wheel;
      }

      .content {
        color: $gunmetal;
      }
    }
  }
</style>
