<template>
    <reviewBlock
        :headerCmsWidgetName="cmsWidgetName"
        :content="displayContent" />
</template>

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

export default {
    name: 'service-location-review',
    components: {
        reviewBlock
    },
    props: {
        cmsWidgetName: String,
        serviceLocation: Object
    },
    data() {
        return {};
    },
    computed: {
        displayContent() {
            return [
                `${this.addressInfo.address}${this.addressInfo.address2 ? ', ' : ''}${
                    this.addressInfo.address2
                }, ${this.addressInfo.city}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`
            ];
        },
        addressInfo() {
            if (this.serviceLocation?.appointmentType === AppointmentTypeStrings.MOBILE
                || this.serviceLocation?.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
                return {
                    address: this.serviceLocation?.address,
                    address2: this.serviceLocation?.address2 ?? '',
                    city: this.serviceLocation?.city,
                    state: this.serviceLocation?.state,
                    zipCode: this.serviceLocation?.zipCode
                };
            }
            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
            };
        }
    }
};
</script>
