<template>
    <div class="shippingAddress" v-show="!basket.billing_address_used">
        <!-- Country -->
        <div class="row">
            <label for="shippingCountry">
                Country<sup>*</sup>
            </label>
            <div class="inputWrap">
                <chosen
                    :options="countries"
                    placeholder="Select country"
                    :value="basket.address.shipping.country"
                    @input="onCountryChange"
                    class="selectCountry"
                    id="shippingCountry"
                    name="shipping_country"
                />
            </div>
        </div>

        <!-- Address Line 1 -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('address.shipping.address1') }"
        >
            <label for="shippingAddress1">
                Address Line 1<sup>*</sup>
            </label>
            <div class="inputWrap">
                <input
                    maxlength="100"
                    type="text"
                    @focus="clearError('address.shipping.address1')"
                    name="shipping_address_line_1"
                    id="shippingAddress1"
                    :value="basket.address.shipping.address1"
                    @input="updateField('address.shipping.address1', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.shipping.address1')">
                <span>{{ errors.address.shipping.address1 }}</span>
            </div>
        </div>

        <!-- Address Line 2 -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('address.shipping.address2') }"
        >
            <label for="shippingAddress2">
                Address Line 2
            </label>
            <div class="inputWrap">
                <input
                    maxlength="100"
                    type="text"
                    name="shipping_address_line_2"
                    id="shippingAddress2"
                    @focus="clearError('address.shipping.address2')"
                    :value="basket.address.shipping.address2"
                    @input="updateField('address.shipping.address2', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.shipping.address2')">
                <span>{{ errors.address.shipping.address2 }}</span>
            </div>
        </div>

        <!-- City -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('address.shipping.city') }"
        >
            <label for="shippingCity">
                City<sup>*</sup>
            </label>
            <div class="inputWrap">
                <input
                    maxlength="39"
                    type="text"
                    name="shipping_city"
                    id="shippingCity"
                    @focus="clearError('address.shipping.city')"
                    :value="basket.address.shipping.city"
                    @input="updateField('address.shipping.city', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.shipping.city')">
                <span>{{ errors.address.shipping.city }}</span>
            </div>
        </div>

        <!-- Postcode -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('address.shipping.postcode') }"
        >
            <label for="shippingPostcode">
                Postcode/Zip<sup v-show="hasPostcodesComputed">*</sup>
            </label>
            <div class="inputWrap">
                <input
                    maxlength="10"
                    type="text"
                    name="shipping_postcode"
                    id="shippingPostcode"
                    @focus="clearError('address.shipping.postcode')"
                    :value="basket.address.shipping.postcode"
                    @input="updateField('address.shipping.postcode', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.shipping.postcode')">
                <span>{{ errors.address.shipping.postcode }}</span>
            </div>
        </div>

        <!-- Country Error -->
        <div
            class="row country"
            :class="{ 'errorWrap showError': hasError('address.shipping.country') }"
        >
            <div class="validationMessage" v-if="hasError('address.shipping.country')">
                <span>{{ errors.address.shipping.country }}</span>
            </div>
        </div>

        <!-- State (if applicable) -->
        <div
            class="row shippingState"
            v-show="hasStatesComputed"
            :class="{ 'errorWrap showError': hasError('address.shipping.state') }"
        >
            <label class="country" for="shippingState">
                State<sup>*</sup>
            </label>
            <div class="inputWrap">
                <select
                    name="shipping_state"
                    :value="basket.address.shipping.state"
                    @change="onStateChange"
                    id="shippingState"
                >
                    <option value="">Choose State</option>
                    <option
                        v-for="(state, key) in stateList.shipping"
                        :key="key"
                        :value="key"
                    >
                        {{ state }}
                    </option>
                </select>
            </div>
            <div class="validationMessage" v-if="hasError('address.shipping.state')">
                <span>{{ errors.address.shipping.state }}</span>
            </div>
        </div>

        <!-- Reason for different shipping address -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('address.shipping.notes') }"
        >
            <label for="shippingNotes">
                Reason for shipping to different address than billing address<sup>*</sup>
            </label>
            <div class="inputWrap">
                <textarea
                    id="shippingNotes"
                    name="shipping_notes"
                    @focus="clearError('address.shipping.notes')"
                    :value="basket.address.shipping.notes"
                    @input="updateField('address.shipping.notes', $event.target.value)"
                    class="text"
                ></textarea>
            </div>
            <div class="validationMessage" v-if="hasError('address.shipping.notes')">
                <span>{{ errors.address.shipping.notes }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import errorMixin from '../shared/error_mixin.js';

export default {
    name: 'shipping-address',

    mixins: [errorMixin],

    props: {
        basket: {
            type: Object,
            required: true
        },
        countries: {
            type: Object,
            default: () => ({})
        },
        stateList: {
            type: [Object, Array],
            default: () => ({ billing: {}, shipping: {} })
        },
        hasPostcodes: {
            type: [Object, Boolean],
            default: () => ({})
        },
        errors: {
            type: [Object, Array],
            default: () => ({})
        }
    },

    computed: {
        hasStatesComputed() {
            return this.stateList.shipping && Object.keys(this.stateList.shipping).length > 0;
        },
        hasPostcodesComputed() {
            return this.hasPostcodes && this.hasPostcodes.shipping;
        }
    },

    methods: {
        clearError(path) {
            this.$emit('clear-error', path);
        },

        updateField(path, value) {
            this.$emit('update-field', { path, value });
        },

        onUpdateField({ path, value }) {
            this.$emit('update-field', { path, value });
        },

        onCountryChange(value) {
            this.updateField('address.shipping.country', value);
            this.$emit('shipping-trigger');
        },

        onStateChange(event) {
            this.updateField('address.shipping.state', event.target.value);
            this.$emit('store-details');
        }
    }
};
</script>
