<template>
  <div class="q-px-md">
    <q-form @submit="submit">
      <div class="q-gutter-y-sm">
        <from-shipment-point-select class="full-width" :errors="errors" />
        <div class="flex no-wrap">
          <to-country-select
            class="q-mr-sm"
            style="width: 220px; flex-shrink: 0"
            :errors="errors"
          />
          <place-select
            :country="country"
            :disable="isDisabledPlaceSelect"
            class="full-width"
          />
        </div>
        <div class="flex no-wrap">
          <weight-field
            class="q-mr-sm col-shrink"
            style="width: 106px;"
            :errors="errors"
          />
          <ui-btn
            v-if="!isShowDimensionsAndPrices"
            @click="isShowDimensionsAndPrices = true"
            flat
            label="Габариты и цена"
          />
          <template v-else>
            <price-field class="q-mr-sm col-shrink" style="width: 106px" />
            <dimensions-field class="col-grow" />
          </template>
        </div>
      </div>
      <error-messages v-if="hasErrors" :errors="errors" />
      <ui-btn type="submit" label="Посчитать доставку" class="q-mt-md" />
    </q-form>
  </div>
</template>

<script lang="ts">
import { Emit, Vue, Component } from 'vue-property-decorator'
import Country from './dto/Country'
import FromShipmentPointSelect from './CalculatorForm/FromShipmentPointSelect.vue'
import ToCountrySelect from './CalculatorForm/ToCountrySelect.vue'
import PlaceSelect from './CalculatorForm/PlaceSelect/PlaceSelect.vue'
import WeightField from './CalculatorForm/WeightField.vue'
import PriceField from './CalculatorForm/PriceField.vue'
import DimensionsField from './CalculatorForm/DimensionsField.vue'
import ErrorMessages from './CalculatorForm/ErrorMessages.vue'
import DeliveryCalculatorStore, {
  getDeliveryCalculatorStore,
} from './utils/DeliveryCalculatorStore'
import { QForm } from 'quasar'
import UiBtn from '../../buttons/UiBtn.vue'

@Component({
  components: {
    UiBtn,
    QForm,
    ErrorMessages,
    DimensionsField,
    PriceField,
    WeightField,
    PlaceSelect,
    ToCountrySelect,
    FromShipmentPointSelect,
  },
})
export default class CalculatorForm extends Vue {
  isShowDimensionsAndPrices = false
  calculatorStore!: DeliveryCalculatorStore

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

  get errors() {
    return this.calculatorStore.errors
  }

  get hasErrors(): boolean {
    return Object.keys(this.errors).length > 0
  }

  get country(): Country | null {
    return this.calculatorStore.country
  }

  get countryHasPlaces(): boolean {
    return this.country ? this.country.citiesCount > 0 : false
  }

  get isDisabledPlaceSelect(): boolean {
    return this.country === null || !this.countryHasPlaces
  }

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