<template>
    <div class="address-questions">
        <div class="row mb-4" aria-live="polite">
            <div class="col">
                <!-- Temporarily changing id from autocomplete to streetAddress -->
                <textboxQuestion
                    customInputId="streetAddress"
                    cmsWidgetName="StreetAddressQuestionWidget"
                    v-model="addressModel.streetAddress"
                    validationRules="street-address-required"
                    ref="streetAddress"
                    :labelBold="labelBold"
                    autocomplete="streetAddress" />
            </div>
        </div>
        <transition name="fade" mode="out-in">
            <div
                class="row mb-4"
                v-show="showApartmentNumberOrBusinessNameField"
                aria-live="polite">
                <div class="col">
                    <textboxQuestion
                        customInputId="apartmentNumberOrBusinessName"
                        cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
                        v-model="addressModel.apartmentNumberOrBusinessName"
                        ref="apartmentNumberOrBusinessName"
                        :labelBold="labelBold" />
                </div>
            </div>
        </transition>
        <transition name="fade" mode="out-in">
            <div class="row mb-4" aria-live="polite">
                <div class="col">
                    <textboxQuestion
                        customInputId="city"
                        cmsWidgetName="CityQuestionWidget"
                        v-model="addressModel.city"
                        ref="city"
                        validationRules="city-required"
                        autocomplete="address-level2"
                        :labelBold="labelBold" />
                </div>
            </div>
        </transition>
        <transition name="fade" mode="out-in">
            <div class="mb-4" aria-live="polite">
                <div class="col mb-4">
                    <dropdownQuestion
                        customDropdownId="state"
                        cmsWidgetName="StateQuestionWidget"
                        v-model="addressModel.state"
                        ref="state"
                        :options="stateOptions"
                        validationRules="state-required"
                        autocomplete="address-level1"
                        :labelBold="labelBold"
                        :isDisabled="this.isStateDisabled" />
                </div>
                <div class="col">
                    <textboxQuestion
                        customInputId="zipCode"
                        cmsWidgetName="ZipQuestionWidget"
                        v-model="addressModel.zipCode"
                        ref="zipCode"
                        mask="#####"
                        validationRules="zip-code-required|zip-code-format"
                        autocomplete="postal-code"
                        :labelBold="labelBold"
                        :isDisabled="this.isZipCodeDisabled" />
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import { defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { stateOptions } from "@/constants/state-options";

// DEFINE VALIDATION RULES
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));

export default {
    name: "mobile-address-questions",
    emits: ["update:modelValue"], // The component emits an event

    props: {
        modelValue: {
            type: Object,
            default: () => ({
                streetAddress: "",
                apartmentNumberOrBusinessName: "",
                city: "",
                state: "",
                zipCode: "",
            }),
        },
        validationRules: String,
        captureApartmentNumberOrBusinessName: {
            type: Boolean,
            default: false,
        },
        preserveCityAndStateOnReset: {
            type: Boolean,
            default: false,
        },
        labelBold: {
            type: Boolean,
            required: false,
            default: false,
        },
        isStateDisabled: {
            type: Boolean,
            required: false,
            default: false,
        },
        isZipCodeDisabled: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    computed: {
        stateOptions() {
            return stateOptions;
        },
        addressModel: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        showApartmentNumberOrBusinessNameField: {
            get: function () {
                return this.captureApartmentNumberOrBusinessName;
            },
        },
    },

    components: {
        textboxQuestion,
        dropdownQuestion,
    },
};
</script>

<style lang="scss">
.address-questions {
    margin-top: 0.5rem;
}

#streetAddressField {
    position: relative;

    .pac-container {
        top: 76px !important; // Height of #streetAddressField
        left: 0 !important;
    }
}
</style>
