<template>
  <q-item
    v-on="$listeners"
    v-bind="$attrs"
    class="ui-place-select-option"
    active-class="ui-place-select-option_active"
    :active="isActive"
  >
    <q-item-section
      side
      class="ui-place-select-option__type"
      :class="{ 'ui-place-select-option__type_city': isCity }"
    >
      {{ place.type }}
    </q-item-section>
    <q-item-section>
      <div class="ui-place-select-option__label" v-html="name" />
      <div class="ui-place-select-option__description">{{ description }}</div>
    </q-item-section>
  </q-item>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Place from '../../dto/Place'
import DeliveryCalculatorStore, {
  getDeliveryCalculatorStore,
} from '../../utils/DeliveryCalculatorStore'
import { QItem, QItemSection } from 'quasar'

@Component({
  components: { QItem, QItemSection },
  inheritAttrs: false,
})
export default class PlaceSelectOption extends Vue {
  @Prop(String) query!: string
  @Prop(Object) place!: Place

  calculatorStore!: DeliveryCalculatorStore

  created() {
    this.calculatorStore = getDeliveryCalculatorStore(this.$store)
  }

  get isCity(): boolean {
    return this.place.type === 'г'
  }

  get isActive(): boolean {
    return this.calculatorStore.place
      ? this.place.id === this.calculatorStore.place.id
      : false
  }

  get name(): string {
    if (this.place.byZip) {
      return `<span class="query-entry">${this.query}</span> • ${this.place.name}`
    }

    return `${this.place.name
      .toLowerCase()
      .replace(this.query, `<span class="query-entry">${this.query}</span>`)}`
  }

  get description(): string {
    return [this.place.region, this.place.district]
      .filter(str => !!str)
      .join(' • ')
  }
}
</script>
