<template>
  <component
    :is="wrapperComponent"
    :dense="dense"
    :class="{ 'ui-list__zebra-offset': striped && title }"
  >
    <q-list
      v-on="$listeners"
      v-bind="$attrs"
      :separator="separator"
      :class="{ 'ui-list__dense text-body2': this.dense }"
      class="ui-list"
    >
      <div v-if="title" class="ui-list-header">
        <q-separator v-if="separatorTop || dense" />
        <q-item :class="headerClass">
          <q-item-section>
            <q-item-label overline class="text-blue-grey">
              {{ title }}
            </q-item-label>
          </q-item-section>
          <slot name="afterTitle" />
        </q-item>
        <q-separator v-if="separatorAfterHeader || dense" />
      </div>

      <slot />

      <q-separator v-if="separatorBottom" />
    </q-list>
  </component>
</template>

<script lang="ts">
import { Component, Prop, Provide, Vue } from 'vue-property-decorator'
import UiZebra from './UiZebra.vue'
import { VueConstructor } from 'vue'
import { QItem, QItemLabel, QItemSection, QList, QSeparator } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QList, QSeparator, QItem, QItemSection, QItemLabel },
})
export default class UiList extends Vue {
  @Prop(String) title?: string
  @Prop(Boolean) separator?: boolean
  @Prop(Boolean) separatorTop?: boolean
  @Prop(Boolean) separatorBottom?: boolean
  @Prop(Boolean) separatorAfterHeader?: boolean
  @Prop(Boolean) dense?: boolean
  @Prop(Boolean) striped?: boolean
  @Prop(Boolean) clickableItems!: boolean
  @Prop(Boolean) darkHeader?: boolean
  @Provide('clickable') clickable: boolean = this.clickableItems

  get headerClass(): string {
    return this.darkHeader ? 'bg-blue-grey-1' : this.striped ? 'bg-white' : ''
  }

  get wrapperComponent(): string | VueConstructor<Vue> {
    return this.striped ? UiZebra : 'div'
  }
}
</script>
