<template>
  <v-main :class="csRateMini + ' me-2'">
    <cs-ticket-quick-access-actions
      :is-full-ticket-menu="isFullTicketMenu"
      :cs-space-info="csSpaceInfo" />
    <v-row no-gutters cols="12">
      <v-col
        v-if="isFullTicketMenu"
        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="chooseRate(true)"
          class="mx-2"
          :small="!isFullTicketMenu"
          fab
          :dark="rateStatus"
          :outlined="!rateStatus"
          :loading="!rateLoaded"
          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="chooseRate(false)"
          class="mx-2"
          fab
          :small="!isFullTicketMenu"
          :loading="!rateLoaded"
          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.rateReason') }}</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.rateReasonRule', {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-snackbar
      dark
      color="orange darken-2"
      v-model="showRateWarning"
      :timeout="2000">
      <span v-if="!isCurrentAssigned">{{ $t('cs.rateWarning.ticket.not.assigned') }}</span>
      <span v-if="isCurrentAssigned">{{ $t('cs.rateWarning.ticket.assigned.to.rater') }}</span>
      <template v-slot:action="{ attrs }">
        <v-icon
          text
          v-bind="attrs"
          @click="showRateWarning = false">
          mdi-close
        </v-icon>
      </template>
    </v-snackbar>
  </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;
      },
    },
    isRateAllowed: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    isCurrentAssigned: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    isFullTicketMenu: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    csSpaceInfo: {
      type: Object,
      default: function () {
        return {};
      },
    }
  },
  data: () => ({
    valid: true,
    showDialog: false,
    tempStatus: null,
    tempReason: null,
    showRateWarning: false,
  }),
  computed: {
    csRateMini() {
      return this.isFullTicketMenu? 'mt-4' : 'mt-0';
    }
  },
  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();
    },
    chooseRate(rate){
      if (!this.isRateAllowed) {
        this.showRateWarning = true;
      } else {
        this.showDialog = true;
        this.tempStatus = rate;
        this.tempReason = this.rateReason;
      }
    }
  }
};
</script>