<template>
  <div id="siteActionscomponent">
    <div :class="`row q-gutter-${gutter}`">
      <!--Actions-->
      <q-btn v-for="(btn, keyAction) in actions.buttons" :key="keyAction" v-bind="btn.props"
             v-if="btn.vIf != undefined ? btn.vIf : true" @click="btn.action != undefined ? btn.action() : null">
        <q-menu v-if="btn.menu" fit>
          <div class="q-py-sm q-px-md">
            <div class="text-subtitle1 text-primary">{{ btn.label }}</div>
            <!--Separator-->
            <q-separator class="q-my-sm"/>
            <!-- Description -->
            <div class="text-caption text-blue-grey">{{ $tr('isite.cms.message.descriptionHelpCenter') }}.</div>
            <!--Actions-->
            <q-list separator class="no-shadow" style="min-width: 260px">
              <q-item v-for="(act, keyAction) in btn.menu.actions" :key="keyAction" clickable v-ripple
                      v-close-popup @click.native="act.action != undefined ? act.action() : null">
                <q-item-section class="text-blue-grey">
                  <div>
                    <q-icon :name="act.icon" class="q-mr-sm" color="primary" size="xs"/>
                    {{ act.label }}
                  </div>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="fa-light fa-chevron-right" size="12px"/>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </q-menu>
        <!-- Tooltip -->
        <q-tooltip>{{ btn.label }}</q-tooltip>
      </q-btn>
      <!--Auth section-->
      <q-btn v-if="quserState.authenticated && (configMode == 'iadmin')" id="profileButton" rounded no-caps
             padding="2px 8px" color="white" unelevated>
        <div id="profileImage" class="img-as-bg"
             :style="`background-image: url('${quserState.userData.mainImage}')`"></div>
        <div class="q-ml-xs q-mr-sm text-blue-grey">{{ quserState.userData.firstName }}</div>
        <q-icon name="fas fa-chevron-down" size="14px" color="blue-grey"/>
        <!--Menu-->
        <q-menu anchor="bottom right" self="top right">
          <div class="row no-wrap q-pa-md">
            <!--Left content-->
            <div class="column">
              <div style="max-width: 110px">
                <!--Image profile-->
                <div class="text-center">
                  <q-avatar size="72px" class="q-mx-auto">
                    <img :src="quserState.userData.mainImage">
                  </q-avatar>
                </div>
                <!--User Data-->
                <div class="text-subtitle1 ellipsis q-mt-md">{{ quserState.userData.fullName }}</div>
                <div class="ellipsis text-caption">
                  {{ quserState.userData.roles.map(role => role.name).join(', ') }}
                </div>
              </div>
            </div>
            <!--Seaprator-->
            <q-separator vertical inset class="q-ml-lg q-mr-sm"/>
            <!--Right content-->
            <div class="column text-left">
              <q-btn v-for="(btn, keyAction) in actions.menu" :key="keyAction" v-bind="btn.props"
                     v-if="btn.vIf != undefined ? btn.vIf : true" v-close-popup padding="xs md"
                     @click="btn.action != undefined ? btn.action() : null"/>
            </div>
          </div>
        </q-menu>
      </q-btn>
    </div>
  </div>
</template>
<script>
export default {
  beforeDestroy() {
    this.$eventBus.$off('header.badge.manage')
  },
  props: {
    gutter: {type: String, default: 'sm'},
    size: {type: String, default: 'small'},
  },
  components: {},
  watch: {},
  mounted() {
    this.$nextTick(function () {
      this.init()
    })
  },
  data() {
    return {
      configMode: config('app.mode'),
      badge: {
        chat: false,
        notification: false
      },
      defaultButtonProps: {
        round : true,
        dense: true,
        color: "white",
        unelevated: true,
        class: "btn-small",
        textColor: "blue-grey",
        noCaps: true
      }
    }
  },
  computed: {
    //Quser state
    quserState() {
      return this.$store.state.quserAuth
    },
    //Current Theme
    theme() {
      return parseInt(this.$store.getters['qsiteApp/getSettingValueByName']('isite::iadminTheme'))
    },
    //Return params of subHeader
    params() {
      return this.$clone(this.$route.meta.subHeader || {})
    },
    showGoToSiteButton() {
      return this.$store.getters['qsiteApp/getSettingValueByName']('isite::showGoToSiteButton') || false;
    },
    //Site Actions
    actions() {
      let goToSiteUrl = this.$store.state.qsiteApp.baseUrl;

      //define the organization url if there're someone selected
      if (this.quserState.organizationId) {
        let organizationSelected = this.quserState.organizations.find(organization => organization.id == this.quserState.organizationId)
        if(organizationSelected) goToSiteUrl = organizationSelected.url
      }

      return {
        buttons: [
          //Go To Site
          {
            vIf: this.showGoToSiteButton,
            name: 'goToSite',
            label: this.$tr('isite.cms.configList.goToSite'),
            props: {
              ...this.defaultButtonProps,
              label: this.$tr('isite.cms.showSite'),
              type: 'a',
              id: 'siteActionGoToSite',
              href: goToSiteUrl,
              target: '_blank',
              round: false,
              rounded: true,
              padding: 'xs md'
            }
          },
          //checking
          {
            name: 'checking',
            vIf: (config('app.mode') == 'ipanel') && this.$auth.hasAccess('icheckin.shifts.create'),
            label: this.$tr('icheckin.cms.sidebar.checkin'),
            props: {
              ...this.defaultButtonProps,
              icon: 'fas fa-stopwatch',
              round: true
            },
            action: () => this.$eventBus.$emit('toggleMasterDrawer', 'checkin')
          },
          //Chat
          {
            name: 'chat',
            label: 'Chat',
            vIf: false && (config('app.mode') == 'iadmin') && this.$auth.hasAccess('ichat.conversations.index'),
            props: {
              ...this.defaultButtonProps,
              icon: 'fa-light fa-message-lines',
              class: `btn-small ${this.badge.chat ? 'active-badge' : ''}`
            },
            action: () => this.$eventBus.$emit('toggleMasterDrawer', 'chat')
          },
          //Notifications
          {
            name: 'notifications',
            label: this.$trp('isite.cms.label.notification'),
            vIf: this.$auth.hasAccess('notification.notifications.manage'),
            props: {
              ...this.defaultButtonProps,
              icon: 'fa-light fa-bell',
              class: `btn-small ${this.badge.notification ? 'active-badge' : ''}`
            },
            action: () => this.$eventBus.$emit('toggleMasterDrawer', 'notification')
          },
          //Help Center
          {
            name: 'helpCenter',
            label: this.$trp('isite.cms.label.helpCenter'),
            vIf: parseInt(this.$store.getters['qsiteApp/getSettingValueByName']('isite::hcStatus') || '0'),
            props: {
              id: 'siteActionHelpCenter',
              ...this.defaultButtonProps,
              icon: "fal fa-question-circle",
            },
            menu: {
              actions: [
                {
                  icon: 'fa-light fa-question-circle',
                  label: 'FAQ',
                  action: () => this.$eventBus.$emit('toggleHelpSection', {sectionName: 'faq'})
                }
              ]
            }
          },
        ],
        menu: [
          //Profile
          {
            name: 'profile',
            props: {
              ...this.defaultButtonProps,
              label: this.$tr('iprofile.cms.sidebar.panelProfile'),
              icon: 'fa-light fa-circle-user',
              round: false,
              rounded: true,
              align: "left",
              id: 'profileButton'
            },
            action: () => (this.$route.name != 'user.profile.me') ? this.$router.push({name: 'user.profile.me'}) : null
          },
          //Settings
          {
            name: 'settings',
            vIf: (config('app.mode') == 'iadmin'),
            props: {
              ...this.defaultButtonProps,
              label: this.$trp('isite.cms.label.setting'),
              icon: 'fa-light fa-folder-gear',
              round: false,
              rounded: true,
              align: "left"
            },
            action: () => this.$eventBus.$emit('toggleMasterDrawer', 'config')
          },
          //logout
          {
            name: 'settings',
            vIf: (config('app.mode') == 'iadmin'),
            props: {
              ...this.defaultButtonProps,
              label: this.$tr('isite.cms.configList.signOut'),
              icon: 'fa-light fa-right-from-bracket',
              round: false,
              rounded: true,
              align: "left"
            },
            action: this.logout
          }
        ]
      }
    },
  },
  methods: {
    init() {
      //Manage badges to button actions
      this.$eventBus.$on('header.badge.manage', (response) => {
        Object.keys(response).forEach(name => this.badge[name] = response[name])
      })
    },
    logout() {
      this.$router.push({name: 'auth.logout'});
    },
  }
}
</script>
<style lang="stylus">
#siteActionscomponent
  #profileImage
    height 25px
    width 25px
    border-radius 50%
</style>
