<template>
  <div id="applications-view">
    <h1>Postulations</h1>
    <div>
      <applicationsFilters/>
      <v-card-title v-if="hasSelected && $store.getters['moduleUser/userIsResponsible']">
        <div>
          Modifications groupées
          <v-select
            :items="$store.state.moduleApplications.available_status"
            label="Statut"
            item-text="status_value"
            item-value="status_value"
            v-model="multipleEditor.status"
          ></v-select>
          <v-btn round color="primary" @click="updateMultiple">Appliquer</v-btn>
          <v-btn round color="primary" @click="deleteMultiple">Supprimer</v-btn>
          <v-btn round color="primary" @click="toggleMailDialog">Contacter</v-btn>
        </div>
      </v-card-title>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="$store.getters['moduleApplications/getFilteredApplications']"
        item-key="applicant_id"
        :pagination.sync="pagination"
        :select-all="$store.getters['moduleUser/userIsResponsible']"
        :search="$store.state.moduleApplications.filters.search"
      >
        <template v-slot:items="props">
          <span></span>
          <tr :class="{ isNew: isNew(props.item.fk_status, props.item.applicant_application_date) }">
            <td v-if="$store.getters['moduleUser/userIsResponsible']" :class="{ isNew: isNew(props.item.fk_status, props.item.applicant_application_date) }">
              <v-checkbox v-model="props.selected" hide-details color="primary"></v-checkbox>
            </td>
            <td>
              <v-tooltip bottom class="mr-2" >
                <template v-slot:activator="{ on }">
                  <v-icon big @click="navigateTo(props.item.applicant_id)" v-on="on">pageview</v-icon>
                </template>
                <span>Consulter</span>
              </v-tooltip>
            </td>
            <td>{{ props.item.applicant_name }} {{ props.item.applicant_fsname }}</td>
            <td>{{ props.item.job_full_value }}</td>
            <td>{{ props.item.location_site }}</td>
            <td>
              <span v-if="props.item.applicant_maturity">&#10004;</span>
              <span v-else>&#10008;</span>
            </td>
            <td>{{ props.item.applicant_address_street }} {{ props.item.applicant_address_npa }}</td>
            <td>{{ props.item.applicant_mail }}</td>
            <td>
              {{ props.item.applicant_birthdate }},
              <span
                v-if="props.item.applicant_has_majority"
              >&#10004;</span>
              <span v-else>&#10008;</span>
            </td>
            <td>{{ props.item.applicant_nationality }}</td>
            <td>{{ props.item.applicant_origin }}</td>
            <td>
              <img
                src="@/assets/french_logo.png"
                alt="logo_french"
                width="18"
                v-if="props.item.applicant_speaks_french"
              >
              <img
                src="@/assets/german_logo.png"
                alt="logo_german"
                width="18"
                v-if="props.item.applicant_speaks_german"
              >
              <img
                src="@/assets/english_logo.png"
                alt="logo_english"
                width="18"
                v-if="props.item.applicant_speaks_english"
              >
              <img
                src="@/assets/others_logo.png"
                alt="logo_others"
                width="18"
                v-if="props.item.applicant_speaks_other"
              >
            </td>
            <td>{{ props.item.applicant_scolarity_end }}</td>
            <td>{{ getFormatedDate(props.item.applicant_application_date) }}</td>
            <td v-if="!$store.getters['moduleUser/userIsResponsible']">
              <span>
                {{props.item.marker_value}}
                <v-icon inline small>star_rating</v-icon>
              </span>
            </td>
            <td>
              <v-select
                :items="$store.state.moduleApplications.available_status"
                item-text="status_value"
                item-value="status_value"
                v-model="props.item.fk_status"
                @change="updateStatus(props.item.applicant_id, props.item.fk_status)"
                v-if="$store.getters['moduleUser/userIsResponsible']"
              ></v-select>
              <span v-else>{{ props.item.fk_status }}</span>
            </td>
          </tr>
        </template>
      </v-data-table>
    </div>
    <MailDialog :opened="mail_dialog_opened" :to="selected" @closed="toggleMailDialog()"></MailDialog>
  </div>
</template>

<script>
import ApplicationsFilters from '@/components/applicationsFilters.vue'
import MailDialog from '@/components/application/mailDialog.vue'

export default {
  name: 'applications-view',
  data () {
    return {
      selected: [],
      multipleEditor: {
        status: ''
      },
      headers: [
        { text: 'Actions', value: 'actions', sortable: false },
        { text: 'Nom, Prénom', align: 'left', value: 'applicant_fsname' },
        { text: 'Formation', value: 'applicant_formation' },
        { text: 'Lieu', value: 'applicant_formation_location' },
        { text: 'Maturité', value: 'applicant_maturity' },
        { text: 'Adresse', value: 'applicant_npa' },
        { text: 'Email', value: 'applicant_mail' },
        { text: 'Date naissance, majeur', value: 'applicant_birthdate' },
        { text: 'Nationalité', value: 'applicant_nationality' },
        { text: 'Origine', value: 'applicant_origin' },
        { text: 'Langues', value: 'applicant_languages', sortable: false },
        { text: 'Fin de scolarité', value: 'applicant_scolarity_end' },
        { text: 'Date postulation', value: 'applicant_application_date' },
        { text: 'Statut', value: 'fk_status' }
      ],
      pagination: { sortBy: 'applicant_application_date', descending: true, rowsPerPage: 25 },
      mail_dialog_opened: false
    }
  },
  created () {
    this.loadApplications()
    if (!this.$store.getters['moduleUser/userIsResponsible']) {
      this.headers.splice(this.headers.length - 1, 0, { text: 'Note', value: 'applicant_marker' })
    }
  },
  computed: {
    hasSelected () { return this.selected.length > 0 }
  },
  methods: {
    loadApplications () {
      this.$store.dispatch('moduleApplications/getApplications')
      this.$store.dispatch('moduleApplications/getAvailableStatus')
      this.$store.dispatch('moduleUser/getUserPermittedJobs')
    },
    navigateTo (id) {
      this.$router.push('/application/' + id)
    },
    updateStatus (id, status) {
      this.$store.dispatch('moduleApplications/changeApplicationStatus', { id: id, status: status })
    },
    updateMultiple () {
      this.selected.forEach(item => {
        this.updateStatus(item.applicant_id, this.multipleEditor.status)
      })
      setTimeout(() => {
        this.$store.dispatch('moduleApplications/getApplications')
      }, 300)
    },
    deleteMultiple () {
      if (confirm('Voulez-vous vraiment supprimer les candidatures sélectionnées ? \n Cette action est irréversible.')) {
        this.selected.forEach(item => {
          this.$store.dispatch('moduleApplications/deleteApplication', { id: item.applicant_id })
        })
        this.$store.dispatch('moduleApplications/getApplications')
      }
    },
    toggleMailDialog () {
      this.mail_dialog_opened = !this.mail_dialog_opened
    },
    isNew (status, date) {
      if (this.$store.getters['moduleUser/userIsResponsible']) {
        return status === 'Nouveau'
      } else {
        return date > this.$store.state.moduleUser.lastConnection.last_connection_date
      }
    },
    getFormatedDate (value) {
      let dateTimeParts = value.split(/[- :]/)
      dateTimeParts[1]--
      let date = new Date(...dateTimeParts)
      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' à ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2)
    }
  },
  components: {
    ApplicationsFilters,
    MailDialog
  }
}
</script>

<style scoped>
.isNew {
  border-left: 5px solid red;
}
</style>