<template>
    <div>
        <h2 class="c-subtitle">{{ 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="user.first_name" data-test="first_name">
                    <label class="c-form-element__label" for="first_name">{{ trans('form').first_name.label }}</label>
                </div>
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="last_name_prefix" v-model="user.last_name_prefix" data-test="last_name_prefix">
                    <label class="c-form-element__label" for="last_name_prefix">{{ trans('form').last_name_prefix.label }}</label>
                </div>
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="last_name" v-model="user.last_name" data-test="last_name">
                    <label class="c-form-element__label" for="last_name">{{ trans('form').last_name.label }}</label>
                </div>
            </div>

            <div class="l-form__row">
                <div class="c-form-element">
                    <input class="c-input" type="text" name="street" value="" id="email" v-model="user.email" data-test="email">
                    <label class="c-form-element__label" for="email">{{ trans('form').email.label }}</label>
                </div>
            </div>

            <div class="l-form__row">
                <div class="c-form-element">
                    <input class="c-input" type="text" name="telephone" value="" id="telephone" v-model="user.telephone" data-test="telephone">
                    <label class="c-form-element__label" for="telephone">{{ trans('form').telephone.label }}</label>
                </div>
            </div>
        </div>

        <div class="l-form__footer">
            <div class="l-button-group  l-button-group--dense">
                <button class="c-button" id="save_form_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_form_modal" type="button" @click="$emit('close')" :disabled="this.isRequesting()" data-test="close">
                    <span class="c-button__text">{{ close_text }}</span>
                </button>
            </div>
        </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
            },
            email: {
                type: String,
                required: true
            },
            telephone: {
                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.user);
            },
        },
        data() {
            return {
                user: {
                    id: this.$props.id,
                    first_name: this.$props.first_name,
                    last_name_prefix: this.$props.last_name_prefix,
                    last_name: this.$props.last_name,
                    email: this.$props.email,
                    telephone: this.$props.telephone,
                }
            }
        },
        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: "siteUser/isRequesting"
            }),
        },
        watch: {
            id: function(newValue, oldValue) {
                return this.user.id = newValue
            },
            first_name: function(newValue, oldValue) {
                return this.user.first_name = newValue
            },
            last_name: function(newValue, oldValue) {
                return this.user.last_name = newValue
            },
            last_name_prefix: function(newValue, oldValue) {
                return this.user.last_name_prefix = newValue
            },
            email: function(newValue, oldValue) {
                return this.user.last_name_prefix = newValue
            },
            telephone: function(newValue, oldValue) {
                return this.user.telephone = newValue
            },
        },
        created() {
            this.$store.dispatch('g11n/translation/loadTranslations', [
                { key: 'form' },
            ]);
        }
    };
</script>