<template>
  <v-main class="mt-4 me-2">
    <v-row no-gutters>
      <v-col
        xl="6"
        lg="12"
        md="12"
        sm="12">
        <v-btn
          class="mt-1 me-1 d-flex"
          :href="listTickets"
          depressed
          outlined
          small
          color="blue">
          <v-icon left>
            mdi-backburger
          </v-icon>
          <span class="text-caption">{{ $t('cs.backToTickets') }}</span>
        </v-btn>
      </v-col>
      <v-col
        xl="6"
        lg="12"
        md="12"
        sm="12">
        <v-btn
          class="mt-1 me-1 d-flex"
          :href="createTicket"
          depressed
          outlined
          small
          color="green">
          <v-icon
            left>
            mdi-ticket
          </v-icon>
          <span class="text-caption">{{ $t('cs.createNewTicket') }}</span>
        </v-btn>
      </v-col>
    </v-row>
    <v-row no-gutters cols="12">
      <v-col
        cols="12"
        xs="12"
        md="12"
        sm="12">
        <v-progress-circular
          class="ma-8"
          v-if="!rateLoaded"
          :size="70"
          :width="3"
          color="grey"
          indeterminate />
        <v-card
          v-if="rateLoaded"
          :style="`border-color:${rateStatus ? 'green' : !rateStatus && rateStatus !== null? 'red' : 'grey'}`"
          class="mt-4 mb-10 me-1"
          outlined>
          <v-card-text>
            <p
              v-if="rateReason">
              {{ rateReason }}
            </p>
            <p v-if="!rateReason && rateStatus">{{ $t('cs.noRateTextLabel') }}</p>
            <p v-if="!rateReason && !rateStatus">{{ $t('cs.noRateReceived') }}</p>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col
        xs="12"
        md="12"
        sm="12">
        <p class="text-caption">{{ $t('cs.SupportRate') }}</p>
        <v-btn
          @click.stop="showDialog = true; tempStatus = true"
          class="mx-2"
          fab
          :dark="rateStatus"
          :outlined="!rateStatus"
          style="border: 1px  solid"
          color="green">
          <v-icon>
            mdi-thumb-up
          </v-icon>
        </v-btn>
        <v-btn
          :dark="!rateStatus"
          :outlined="rateStatus || rateStatus === null"
          @click.stop="showDialog = true; tempStatus = false"
          class="mx-2"
          fab
          style="border: 1px  solid"
          color="red">
          <v-icon dark>
            mdi-thumb-down
          </v-icon>
        </v-btn>
      </v-col>
    </v-row>
    <v-dialog
      v-model="showDialog"
      persistent
      width="400">
      <v-card>
        <v-card-title>
          <span class="text-caption">{{ $t('cs.rateRaison') }}</span>
        </v-card-title>
        <v-card-text>
          <v-conatiner>
            <v-row>
              <v-col
                cols="12"
                sm="12"
                md="12">
                <v-form
                  ref="rateForm"
                  v-model="valid"
                  lazy-validation>
                  <v-textarea
                    v-model="tempReason"
                    :value="rateReason"
                    :rules="[v => (v || '' ).length <= 200 || $t('cs.rateRaisonRule', {0:200})]"
                    :counter="200"
                    class="pa-2"
                    :label="$t('cs.rateTextLabel')"
                    rows="4"
                    auto-grow />
                </v-form>
              </v-col>
            </v-row>
          </v-conatiner>
        </v-card-text>
        <v-card-actions class="justify-center">
          <v-btn
            tile
            outlined
            style="border: 1px  solid"
            color="blue"
            @click="updateCustomerRate">
            {{ $t('cs.proceedRate') }}
          </v-btn>
          <v-btn
            tile
            outlined
            style="border: 1px  solid"
            color="blue"
            @click="showDialog = false">
            {{ $t('cs.cancelRate') }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-main>
</template>

<script>
export default {
  props: {
    rateStatus: {
      type: Boolean,
      default: function () {
        return null;
      },
    },
    rateReason: {
      type: String,
      default: function () {
        return '';
      },
    },
    rateLoaded: {
      type: Boolean,
      default: function () {
        return false;
      },
    }
  },
  data: () => ({
    valid: true,
    showDialog: false,
    tempStatus: null,
    tempReason: null,
  }),
  computed: {
    listTickets () {
      return `${eXo.env.portal.context}/g/:spaces:${eXo.env.portal.spaceGroup}/${eXo.env.portal.spaceName}/tickets-list`;
    },
    createTicket () {
      return `${eXo.env.portal.context}/g/:spaces:${eXo.env.portal.spaceGroup}/${eXo.env.portal.spaceName}/ticket`;
    }
  },
  methods: {
    updateCustomerRate() {
      this.validateRateForm();
      if (this.valid) {
        const status = this.tempStatus;
        const reason = this.tempReason;
        this.$root.$emit('update-customer-rate', status, reason);
        this.tempStatus = null;
        this.tempReason = null;
        this.showDialog = false;
      }
    },
    validateRateForm() {
      this.$refs.rateForm.validate();
    }
  }
};
</script>