<template>
    <div class="postcodeLookup">
        <!-- Postcode Search -->
        <div
            class="row"
            :class="{
                'fullWidth': !pafSearchEnabled,
                'errorWrap showError': hasPostcodeError
            }"
        >
            <label :for="idPrefix + 'PostcodeSearch'">
                Postcode/Zip<sup v-show="hasPostcodes">*</sup>
            </label>

            <div class="inputWrap" :class="{ 'buttonInline': pafSearchEnabled }">
                <input
                    maxlength="10"
                    type="text"
                    :name="namePrefix + '_postcode'"
                    :id="idPrefix + 'PostcodeSearch'"
                    @focus="$emit('clear-error', `errors.address.${type}.postcode`)"
                    :value="address.postcode"
                    @input="onPostcodeInput"
                    class="text postcode-search"
                />

                <button
                    type="button"
                    :id="idPrefix + 'PostCodeSubmit'"
                    v-show="pafSearchEnabled"
                    @click.prevent="$emit('trigger-paf')"
                    :name="`submit[${type}_postcode]`"
                    class="button"
                >
                    Find Address
                </button>
            </div>

            <div class="validationMessage" v-if="hasPostcodeError">
                <span>{{ postcodeError }}</span>
            </div>
        </div>

        <!-- Address Selection -->
        <div
            class="row"
            v-show="hasAddresses && pafSearchEnabled"
        >
            <label :for="idPrefix + '_address_list'">
                Please select<sup>*</sup>
            </label>

            <div class="inputWrap">
                <chosen
                    :options="addressList"
                    placeholder="Select address"
                    :value="selectedPafAddress"
                    @input="onAddressSelect"
                    class="selectAddress"
                    :id="idPrefix + '_address_list'"
                    :name="idPrefix + '_address_list'"
                />
            </div>
        </div>

        <!-- Can't Find Address Link -->
        <div class="row cantFindAddress" v-if="pafSearchEnabled && hasAddresses">
            <a href="#" @click.prevent="$emit('toggle-cant-find')">
                {{ cantFindAddress ? "Hide manual entry" : "Can't find your address?" }}
            </a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'postcode-lookup',

    props: {
        type: {
            type: String,
            required: true,
            validator: value => ['billing', 'shipping'].includes(value)
        },
        address: {
            type: Object,
            required: true
        },
        addressList: {
            type: Array,
            default: () => []
        },
        selectedPafAddress: {
            type: String,
            default: ''
        },
        cantFindAddress: {
            type: Boolean,
            default: false
        },
        errors: {
            type: [Object, Array],
            default: () => ({})
        },
        pafEnabled: {
            type: Boolean,
            default: true
        },
        hasPostcodes: {
            type: Boolean,
            default: true
        }
    },

    computed: {
        idPrefix() {
            return this.type;
        },
        namePrefix() {
            return this.type;
        },
        pafSearchEnabled() {
            return this.pafEnabled && this.address.country === 'GB';
        },
        hasAddresses() {
            return this.addressList && this.addressList.length > 0;
        },
        hasPostcodeError() {
            return this.errors?.address?.[this.type]?.postcode;
        },
        postcodeError() {
            return this.errors?.address?.[this.type]?.postcode || '';
        }
    },

    methods: {
        onPostcodeInput(event) {
            this.$emit('update-field', {
                path: `address.${this.type}.postcode`,
                value: event.target.value
            });
        },

        onAddressSelect(value) {
            this.$emit('set-paf-address', value);
        }
    }
};
</script>
