<template>
  <div v-show="!isHidden" class="q-my-md">
    <widget-wrapper v-bind="$props" ref="widget">
      <base-label-value :padded-label="paddedGroups">
        <template v-slot:label>
          {{ fieldNode.label ? fieldNode.label : '' }}
        </template>
        <template v-slot:value>
          <reference-book-item
            v-if="fieldNode"
            :dictionary="dictionary"
            :value="value && value.__id"
            :name="valueName"
            @load="dictionaryReady"
          >
            <template
              v-if="!(isReadonly && readonlyAsText)"
              v-slot="{ options, loading, value }"
            >
              <q-select
                :disabled="isReadonly"
                v-bind="props"
                outlined
                dense
                map-options
                emit-value
                :options="options"
                v-model="selected"
                :error="hasError"
                :display-value="loading ? '' : undefined"
                :error-message="errorMessage"
                :loading="loading"
              >
                <template v-if="isMultipleOptions" v-slot:option="scope">
                  <q-expansion-item
                    expand-separator
                    group="somegroup"
                    :default-opened="hasOption(scope)"
                    header-class="text-weight-bold"
                    :label="scope.opt.label"
                  >
                    <template v-for="child in scope.opt.children">
                      <q-item
                        :key="child.label + child.value.code"
                        clickable
                        v-ripple
                        v-close-popup
                        @click="selectOption(child)"
                        :class="{
                          'bg-light-blue-1': isSelectedOption(child),
                        }"
                      >
                        <q-item-section>
                          <q-item-label
                            v-html="child.label"
                            class="q-ml-md"
                          ></q-item-label>
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-expansion-item>
                </template>
              </q-select>
            </template>
          </reference-book-item>
        </template>
      </base-label-value>
    </widget-wrapper>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import DictionarySelect from './DictionarySelect';

@Component({})
export default class CardDictionary extends DictionarySelect {
  @Prop({ type: Boolean, default: true }) readonlyAsText!: boolean;
  @Prop({}) hideNulls!: boolean;
  @Prop({}) paddedGroups!: boolean;
  @Prop({}) dictionary!: string;
  @Prop() valueName?: string;

  get currentValue(): string {
    if (this.value && Array.isArray(this.value.__id)) {
      return this.value.__id[0];
    }
    return this.value ? (this.value.__id as string) : '';
  }

  get isHidden(): boolean {
    return this.hideNulls && !this.currentValue;
  }
}
</script>
