<template>
  <div class="ui-delivery-calculator">
    <div class="text-bold q-mx-md q-my-md">Калькулятор доставки</div>

    <calculator-form @submit="submit" />
    <div class="ui-delivery-calculator__result-wrap q-mt-md">
      <result-description
        v-if="!isCalculated"
        icon="las la-calculator"
        title="Давай посчитаем!"
      >
        Выбери направление, укажи вес в граммах, если требуется укажи цену и
        габариты.
      </result-description>

      <calculator-result v-if="isCalculated && !isNotFound" @submit="submit" />
      <result-description
        v-if="isCalculated && isNotFound"
        icon="las la-frown"
        title="Не удалось посчитать доставку"
      >
        <p>1. Возможно мы пока не можем расчитать это направление.</p>
        <p>
          2. Проверьте вес и габариты возможно они привышают максимально
          допустимые
        </p>
      </result-description>
    </div>
    <ui-page-loading :showing="isPending" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import CalculatorResult from './delivery-calculator/CalculatorResult.vue'
import CalculatorForm from './delivery-calculator/CalculatorForm.vue'
import ResultDescription from './delivery-calculator/ResultDescription.vue'
import UiPageLoading from '../UiPageLoading.vue'
import DeliveryCalculatorStore, {
  getDeliveryCalculatorStore,
} from './delivery-calculator/utils/DeliveryCalculatorStore'

@Component({
  components: {
    UiPageLoading,
    ResultDescription,
    CalculatorForm,
    CalculatorResult,
  },
})
export default class CalculatorPage extends Vue {
  calculatorStore!: DeliveryCalculatorStore

  isPending = false

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

  get isCalculated(): boolean {
    return this.calculatorStore.isCalculated
  }

  get isNotFound(): boolean {
    return this.calculatorStore.isNotFound
  }

  submit() {
    this.isPending = true

    this.calculatorStore
      .calculateDeliveries()
      .finally(() => (this.isPending = false))
  }
}
</script>
