<template>
  <div class="bg-white q-py-sm q-px-md full-width">
    <span class="text-bold q-mr-md">Валюта</span>
    <ui-btn-toggle v-model="currency" :options="options" />
  </div>
</template>

<script lang="ts">
import { Emit, Vue, Component } from 'vue-property-decorator'
import DeliveryCalculatorStore, {
  getDeliveryCalculatorStore,
} from '../utils/DeliveryCalculatorStore'
import Currency from '../dto/Currency'
import UiBtnToggle from '../../../form/UiBtnToggle.vue'
import CurrencyService from '../utils/CurrencyService'

@Component({
  components: { UiBtnToggle },
  inheritAttrs: false,
})
export default class CurrencySelect extends Vue {
  calculatorStore!: DeliveryCalculatorStore
  currencies: Currency[] = [
    CurrencyService.currencies.RUB,
    CurrencyService.currencies.USD,
  ]

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

  get options() {
    return this.currencies.map(c => ({ label: c.code, value: c }))
  }

  get currency(): Currency {
    return this.calculatorStore.currency
  }

  set currency(currency: Currency) {
    this.calculatorStore.setCurrency(currency)
    this.change()
  }

  @Emit()
  change() {
    return true
  }
}
</script>
