<template>
    <div>
        <h2 class="c-title">{{ header_text }}</h2>
        <div class="l-form  u-spacing-mt3">
            <div class="l-form__row  l-form__row--grid" data-grid-template-columns="2-1-2">
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="first_name" v-model="address.first_name" data-test="first_name">
                    <label class="c-form-element__label" for="first_name">
                        {{ trans('address').first_name }}
                    </label>
                </div>
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="last_name_prefix" v-model="address.last_name_prefix" data-test="last_name_prefix">
                    <label class="c-form-element__label" for="last_name_prefix">
                        {{ trans('address').last_name_prefix }}
                    </label>
                </div>
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="last_name" v-model="address.last_name" data-test="last_name">
                    <label class="c-form-element__label" for="last_name">
                        {{ trans('address').last_name }}
                    </label>
                </div>
            </div>

            <div class="l-form__row  l-form__row--grid" data-grid-template-columns="3-2">
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="street" v-model="address.street" data-test="street">
                    <label class="c-form-element__label" for="street">
                        {{ trans('address').street }}
                    </label>
                </div>
                <div class="c-form-element">
                    <input class="c-input" type="text" name="house_number" value="" id="house_number" v-model="address.house_number" data-test="house_number">
                    <label class="c-form-element__label" for="house_number">
                        {{ trans('address').house_number }}
                    </label>
                </div>
            </div>

            <div class="l-form__row  l-form__row--grid" data-grid-template-columns="2-3">
                <div class="c-form-element">
                    <input class="c-input" type="text" name="postal_code" value="" id="postal_code" v-model="address.postal_code" data-test="postal_code">
                    <label class="c-form-element__label" for="postal_code">
                        {{ trans('address').postal_code }}
                    </label>
                </div>
                <div class="c-form-element">
                    <input class="c-input" type="text" name="city" value="" id="city" v-model="address.city" data-test="city">
                    <label class="c-form-element__label" for="city">
                        {{ trans('address').city }}
                    </label>
                </div>
            </div>

            <div class="l-form__row">
                <div class="c-form-element">
                    <region-select name="country_iso3" id="country" :selected="address.country_iso3" @change="regionSelected"/>
                    <label class="c-form-element__label" for="country">
                        {{ trans('address').country }}
                    </label>
                </div>
            </div>

        </div>
        <div class="l-button-group  l-button-group--dense  u-spacing-mt3">
            <button class="c-button" id="save_address_modal" type="button" @click="save" :disabled="this.isRequesting()" data-test="save">
                <span class="c-button__text">{{ save_text }}</span>
            </button>
            <button class="c-button  c-button--ghost" id="close_address_modal" type="button" @click="$emit('close')" :disabled="this.isRequesting()" data-test="close">
                <span class="c-button__text">{{ close_text }}</span>
            </button>
        </div>
    </div>
</template>

<script>
    import {mapGetters, mapState} from "vuex";
    import RegionSelect from "./forms/regionSelect";

    export default {
        components: {
          RegionSelect
        },
        props: {
            id: {
                type: Number,
                required: false,
                default: -1
            },
            first_name: {
                type: String,
                required: true
            },
            last_name_prefix: {
                type: String,
                required: true
            },
            last_name: {
                type: String,
                required: true
            },
            street: {
                type: String,
                required: true
            },
            house_number: {
                type: String,
                required: true
            },
            postal_code: {
                type: String,
                required: true
            },
            city: {
                type: String,
                required: true
            },
            country: {
                type: String,
                required: true
            },
            country_iso3: {
                type: String,
                required: true
            },
            header_text: {
                type: String,
                required: false,
                default: ''
            },
            save_text: {
                type: String,
                required: false,
                default: 'save'
            },
            close_text: {
                type: String,
                required: false,
                default: 'close'
            },
        },
        methods: {
            save() {

                this.$emit('save', this.address);
            },
            regionSelected: function(selected) {
                this.address.country_iso3 = selected;
            }
        },
        data() {
            return {
                address: {
                    id: this.$props.id,
                    first_name: this.$props.first_name,
                    last_name_prefix: this.$props.last_name_prefix,
                    last_name: this.$props.last_name,
                    street: this.$props.street,
                    house_number: this.$props.house_number,
                    postal_code: this.$props.postal_code,
                    city: this.$props.city,
                    country: this.$props.country,
                    country_iso3: this.$props.country_iso3,
                }
            }
        },
        computed: {
            ...mapGetters({
                //Maps the getter function "translation" in vuex module translations.js to a computed property called trans in this component
                trans: "g11n/translation/translation",
                isRequesting: "address/isRequesting"
            }),
        },
        watch: {
            id: function(newValue, oldValue) {
                return this.address.id = newValue
            },
            first_name: function(newValue, oldValue) {
                return this.address.first_name = newValue
            },
            last_name: function(newValue, oldValue) {
                return this.address.last_name = newValue
            },
            last_name_prefix: function(newValue, oldValue) {
                return this.address.last_name_prefix = newValue
            },
            street: function(newValue, oldValue) {
                return this.address.street = newValue
            },
            house_number: function(newValue, oldValue) {
                return this.address.house_number = newValue
            },
            postal_code: function(newValue, oldValue) {
                return this.address.postal_code = newValue
            },
            city: function(newValue, oldValue) {
                return this.address.city = newValue
            },
            country: function(newValue, oldValue) {
                return this.address.country = newValue
            },
            country_iso3: function(newValue, oldValue) {
                return this.address.country_iso3 = newValue
            },
        },
        created() {
            this.$store.dispatch('g11n/translation/loadTranslations', [
                { key: 'addresses' },
            ]);
        }
    };
</script>