<template>
    <div id="shop-location">
        <textBlock :customText="questionText" typeStyle="button-question" class="mb-2" />
        <div>
            <div>
                <label v-for="addressItem in addressDetails" :key="addressItem">
                    {{ addressItem }}
                </label>
            </div>
            <div>
                <label>{{ selectedShop.distance }}</label>
            </div>
        </div>

        <shopQuestionPopup
            v-if="isShopQuestionDisplayed"
            :selectedProviderNumberFromParent="selectedProviderNumberFromParent"
            :shopProviderDataFromParent="shopProviderDataFromParent"
            :zipCodeFromParent="zipCodeFromParent"
            @shop-selected="onShopSelected"
            @updated-serviceability="setServiceabilityDetails"
            cmsWidgetName="YourSafeliteShopWidget" />
    </div>
</template>

<script>
import textBlock from "@/digital-components/text-block/text-block";
import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";

export default {
    name: "shopLocation",
    props: {
        selectedShop: {
            type: Object,
            default: () => ({
                city: null,
                distance: null,
                address1: null,
                address2: null,
            }),
        },
        isShopQuestionDisplayed: {
            type: Boolean,
            default: false,
        },
        selectedProviderNumberFromParent: {
            type: String,
            default: null,
        },
        shopProviderDataFromParent: {
            type: Object,
            default: () => ({}),
        },
        zipCodeFromParent: {
            type: String,
            default: null,
        },
    },
    computed: {
        questionText() {
            return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
        },
        addressDetails() {
            const { distance, ...addressDetails } = this.selectedShop;
            return addressDetails;
        },
    },
    components: {
        textBlock,
        shopQuestionPopup,
    },
    methods: {
        onShopSelected(shopQuestionPopUpData) {
            this.$emit("shop-selected", shopQuestionPopUpData);
        },
        setServiceabilityDetails(serviceabilityDetails) {
            this.$emit("updated-serviceability", serviceabilityDetails);
        },
    },
};
</script>

<style lang="scss" scoped>
#shop-location {
    & > div {
        display: flex;
        justify-content: space-between;

        & > div {
            display: flex;
            flex-direction: column;

            label {
                font-size: 0.875rem;
            }
        }
    }

    & > div.shop-question {
        width: 172px;
    }
}
</style>
<style lang="scss">
#shop-location {
    & > div.shop-question {
        width: fit-content;
        background-color: $blue;
        border-radius: $border-radius-pill;

        a {
            display: inline-block;
            text-decoration: none;
            color: $white;
            font-weight: $font-weight-600;
            line-height: 1.5rem;
            padding: 0.75rem 3rem;
        }
    }
}
</style>
