<template>
    <alert
        v-for="alert in prefixedAlertReasons"
        :key="alert.cmsWidgetName"
        :ref="alert.cmsWidgetName"
        class="mt-2 mb-3"
        :manualHeadline="alert.manualHeadline"
        :cmsWidgetName="alert.cmsWidgetName"
        alertClass="alert-warning" />
</template>
<script>
import alert from '@/ux-components/alert/alert.vue';
import widgetFields from '@/constants/cms-widget-fields';
import { toTitleCase } from '@/helpers/text-helper.js';
import getAlertReasons from '@/layouts/schedule-page/helpers/schedule-helper';

export default {
    name: 'location-alerts',
    components: {
        alert
    },
    props: {
        cmsWidgetPrefix: {
            type: String,
            default: ''
        },
        city: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            alertReasons: []
        };
    },
    computed: {
        prefixedAlertReasons() {
            if (!this.alertReasons || this.alertReasons.length === 0) {
                return [];
            }

            return this.alertReasons.reduce((newObj, alertReason) => {
                newObj.push({
                    cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`,
                    manualHeadline: this.getCmsCopyForAlertReason(alertReason),
                    alertReason
                });
                return newObj;
            }, []);
        }
    },
    methods: {
        loadInitialData(serviceLocationCtu, providerCtu) {
            let ctuToUse = serviceLocationCtu;
            if (providerCtu) {
                ctuToUse = providerCtu;
            }
            return getAlertReasons(ctuToUse);
        },
        initializeComponent(initialData) {
            this.alertReasons = initialData;
        },
        getCmsCopyForAlertReason(alertReason) {
            const widgetName = `${this.cmsWidgetPrefix}${alertReason}`;
            let content = this.getCmsContent(widgetName, widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
            content = content.replace('{custom:city}', toTitleCase(this.city));
            return content;
        }
    }
};
</script>
