<template>
    <q-btn-dropdown
      class="customized-disabled-btn"
      push
      flat
      no-caps
      icon="share"
      size="md"
      :label="userStore.currentDomain.domainName"
      :disable-dropdown="true"
      dropdown-icon='none'
      :disable="true"
    >
      <q-list>
        <q-item :active="isCurrentDomain(domain)" active-class="active-domain-item" v-for="domain in domains" :key="domain.domainName"
          clickable v-close-popup @click="onItemClick(domain)">
          <q-item-section side>
            <q-icon name="share" size="sm" :color="isCurrentDomain(domain) ? 'orange': ''" text-color="white"></q-icon>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{domain.domainName}}</q-item-label>
            <q-item-label caption>{{domain.kintoneUrl}}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>

</template>
<script setup lang="ts" >
import { IDomainInfo } from 'src/types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore';
import { useDomainStore } from 'src/stores/useDomainStore';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const userStore = useAuthStore();
const domainStore = useDomainStore();
const route = useRoute()
const domains = computed(() => domainStore.userDomains);

(async ()=>{
  await domainStore.loadUserDomains();
})();

const isUnclickable = computed(()=>{
  return route.path.startsWith('/FlowChart/') || domains.value === undefined || domains.value.length === 0;
});

const isCurrentDomain=(domain:IDomainInfo)=>{
  return domain.id === userStore.currentDomain.id;
}

const onItemClick=(domain:IDomainInfo)=>{
  console.log(domain);
  userStore.setCurrentDomain(domain);
}
</script>
<style lang="scss">
.q-btn.disabled.customized-disabled-btn {
  opacity: 1 !important;
  cursor: default !important;
}

.q-item.active-domain-item {
  color: inherit;
  background: #eee;
}

.q-btn.disabled.customized-disabled-btn * {
  cursor: default !important;
}
</style>
