<template>
  <v-app>
    <v-toolbar
      id="toolbar-sticky-menu-ticket"
      transition="scroll-y-transition"
      v-show="!isFullTicketMenu && !isMobile"
      color="white"
      dense>
      <v-container
        fluid>
        <v-row no-gutters>
          <v-col
            align="center"
            cols="12"
            lg="3"
            md="3"
            sm="6"
            xs="12">
            <cs-ticket-rate
              :rate-status="rateStatus"
              :rate-reason="rateReason"
              :rate-loaded="rateLoaded"
              :is-rate-allowed="isRateAllowed"
              :is-full-ticket-menu="isFullTicketMenu" />
          </v-col>
          <v-col
            cols="12"
            lg="3"
            md="3"
            sm="6"
            xs="12">
            <cs-ticket-statuses
              :edit-mode="editMode"
              :status="status"
              :available-states="availableStates" />
          </v-col>
          <v-col
            cols="12"
            lg="3"
            md="3"
            sm="6"
            xs="12">
            <!--<cs-ticket-severities
              :edit-mode="editMode"
              :severity="severity"
              :available-severities="availableSeverities" />-->
            <cs-ticket-status-reason
              :edit-mode="editMode"
              :reason="reason"
              :available-reasons="availableReasons" />
          </v-col>
          <v-col
            cols="12"
            lg="3"
            md="3"
            sm="6"
            xs="12">
            <v-row no-gutters>
              <v-col
                cols="11">
                <cs-ticket-attached-tasks
                  :edit-mode="editMode"
                  :can-manage="canManage"
                  :attached-task="attachedTask"
                  :attached-tasks-list="attachedTasksList"
                  :attached-tasks-with-status="attachedTasksWithStatus" />
              </v-col>
              <v-col
                cols="1">
                <cs-ticket-edit-mode-action
                  :edit-mode="editMode"
                  :can-manage="canManage" />
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  props: {
    isFullTicketMenu: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    editMode: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    severity: {
      type: String,
      default: function () {
        return null;
      },
    },
    availableSeverities: {
      type: Array,
      default: function () {
        return [];
      },
    },
    status: {
      type: String,
      default: function () {
        return null;
      },
    },
    availableStates: {
      type: Array,
      default: function () {
        return [];
      },
    },
    rateStatus: {
      type: Boolean,
      default: function () {
        return null;
      },
    },
    rateReason: {
      type: String,
      default: function () {
        return '';
      },
    },
    isRateAllowed: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    isCurrentAssigned: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    rateLoaded: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    attachedTask: {
      type: String,
      default: function () {
        return null;
      },
    },
    canManage: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    attachedTasksWithStatus: {
      type: Array,
      default: function () {
        return [];
      },
    },
    attachedTasksList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    reason: {
      type: String,
      default: function () {
        return null;
      },
    },
    availableReasons: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    isMobile() {
      return this.$vuetify.breakpoint.name === 'xs' || this.$vuetify.breakpoint.name === 'sm' ;
    }
  }
};
</script>