<template>
  <div id="estimate-form">
      <div class="p-t-2">
        <SelectInput
          input-id="car-model"
          input-name="car_model"
          :value.sync="configurator.carModelId"
          :label="$t('checkout.adjust_configuration.car_model')"
          :options="adjustableCarModels"
          :disabled="configurator.rateEstimated"
          :default="deal.final_offer.final_car_model_id"
          vv-validate="required|numeric"/>
      </div>

      <div class="p-t-1">
        <h5 class="font-weight-bold m-b-half">{{ $t('checkout.adjust_configuration.calculate_deal') }}</h5>
        <span class="h6 text-muted">{{ $t('checkout.adjust_configuration.insert_data') }}</span>
      </div>

      <div class="row p-t-2">
        <div class="col-md-4">
          <TextInput
            input-id="msrp"
            input-name="msrp"
            :value.sync="configurator.msrp"
            :label="$t('checkout.adjust_configuration.msrp')"
            :disabled="configurator.rateEstimated"
            vv-validate="required|decimal:2|min_value:1"/>
        </div>

        <div class="col-md-4">
          <SelectInput
            input-id="km-per-year"
            input-name="km_per_year"
            :value.sync="configurator.kmPerYear"
            :label="$t('checkout.car_information.km_per_year')"
            :options="kmPerYearOptions"
            :disabled="configurator.rateEstimated"
            :default="deal.final_offer.km_per_year"
            vv-validate="required|numeric"/>
        </div>

        <div class="col-md-4">
          <SelectInput
            input-id="months"
            input-name="months"
            :value.sync="configurator.months"
            :label="$t('checkout.general.months')"
            :options="monthsOptions"
            :disabled="configurator.rateEstimated"
            :default="deal.final_offer.months"
            vv-validate="required|numeric"/>
        </div>
      </div>

      <div class="text-center p-y-2" v-if="!configurator.rateEstimated">
        <button
          class="btn btn-success"
          @click="estimate"
          :disabled="loading || hasErrors">

          {{ $t('checkout.buttons.estimate') }}
        </button>
      </div>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import TextInput from 'shared/components/form/TextInput'
  import SelectInput from 'shared/components/form/SelectInput'
  import _range from 'lodash/range'

  const TAX_RATE = 1.19

  export default {
    components: { TextInput, SelectInput },

    data() {
      return {
        kmPerYearOptions: _range(10000, 55000, 5000),
        monthsOptions: _range(24, 60, 12)
      }
    },

    computed: {
      ...mapGetters(['deal', 'loading', 'adjustableCarModels', 'configurator']),

      hasErrors() {
        return this.errors.items.length > 0
      }
    },

    methods: {
      ...mapActions(['getLeasingCalculation', 'updateConfigurator']),

      estimate() {
        this.$validator.validateAll().then((result) => {
          if(!result) { return }

          this.getLeasingCalculation({
            price: this.configurator.msrp / TAX_RATE,
            kmPerYear: this.configurator.kmPerYear,
            months: this.configurator.months,
            modelId: this.configurator.carModelId
          }).then(({ data }) => {
            this.updateConfigurator({
              rateEstimated: true,
              leasingRate: parseFloat(data.finance_rate.fractional),
              serviceRate: parseFloat(data.service_rate.fractional),
              insuranceRate: parseFloat(data.insurance_rate.fractional),
              untappedKmDiscount: parseFloat(data.discount_per_untapped_km_cents),
              extraKmPrice: parseFloat(data.price_per_extra_km_cents)
            })
          }).catch((error) => {
            this.flash(this.$t('checkout.errors.estimated_rates'), 'error')
          })
        })
      }
    }
  }
</script>