<template>
    <reviewBlock
        :headerCmsWidgetName="cmsWidgetName"
        :content="displayContent"
        @edit-clicked="editClicked" />
</template>

<script>
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";

export default {
    name: "service-location-review",
    props: {
        cmsWidgetName: String,
        serviceLocation: Object,
    },
    data() {
        return {};
    },
    methods: {
        editClicked() {
            this.$emit("edit-clicked");
        },
    },
    computed: {
        displayContent() {
            return [
                `${this.addressInfo?.address?.toLowerCase()}${this.addressInfo?.address2 ? ", " : ""}${this.addressInfo?.address2?.toLowerCase()}, ${this.addressInfo?.city?.toLowerCase()}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
            ];
        },
        addressInfo() {
            if (this.serviceLocation?.appointmentType === AppointmentTypeStrings.MOBILE) {
                return {
                    address: this.serviceLocation?.address,
                    address2: this.serviceLocation?.address2 ?? "",
                    city: this.serviceLocation?.city,
                    state: this.serviceLocation?.state,
                    zipCode: this.serviceLocation?.zipCode,
                };
            } else {
                return {
                    address: this.serviceLocation?.provider?.address?.streetAddress,
                    address2: "",
                    city: this.serviceLocation?.provider?.address?.city,
                    state: this.serviceLocation?.provider?.address?.state,
                    zipCode: this.serviceLocation?.provider?.address?.zipCode,
                };
            }
        },
    },
    components: {
        reviewBlock,
    },
};
</script>
