<template>
    <div
        v-if="!isDismissed"
        :class="[$style['c-alert'],
                 $style[`c-alert--${type}`]]"
        data-test-id="alert-component"
        role="alert"
        :aria-live="ariaLiveAttribute">
        <div
            :class="$style['c-alert-headingContainer']">
            <component
                :is="icon"
                :class="[$style['c-alert-icon'],
                         $style[`c-alert-icon--${type}`]]"
                data-test-id="alert-icon" />
            <!-- TODO: make this dynamic. Find related ticket ;) -->
            <h2
                :class="$style['c-alert-heading']"
                data-test-id="alert-heading">
                {{ heading }}
            </h2>
            <f-button
                v-if="isDismissible"
                type="button"
                is-icon
                :class="[$style['c-alert-dismiss']]"
                button-size="xsmall"
                button-type="ghostTertiary"
                data-test-id="alert-dismiss"
                @click.native="dismiss">
                <cross-icon
                    :class="[$style['c-alert-dismiss-icon']]"
                />
                <span class="is-visuallyHidden">
                    {{ copy.dismissAlertText }}
                </span>
            </f-button>
        </div>
        <div
            :class="$style['c-alert-content']">
            <slot />
        </div>
    </div>
</template>

<script>
import {
    CloseSmallIcon as CrossIcon,
    AlertCircleSmallIcon as DangerIcon,
    InfoCircleOutlineSmallIcon as InfoIcon,
    CheckCircleOutlineSmallIcon as SuccessIcon,
    AlertTriangleSmallIcon as WarningIcon
} from '@justeattakeaway/pie-icons-vue';

import {
    globalisationServices
} from '@justeat/f-services';

import FButton from '@justeat/f-button';
import tenantConfigs from '../tenants';

export default {
    name: 'FAlert',
    components: {
        CrossIcon,
        DangerIcon,
        InfoIcon,
        SuccessIcon,
        WarningIcon,
        FButton
    },
    props: {
        locale: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            required: true,
            validator: value => ['success', 'warning', 'info', 'danger'].indexOf(value) !== -1
        },
        heading: {
            type: String,
            required: true
        },
        isDismissible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        const locale = globalisationServices.getLocale(tenantConfigs, this.locale, this.$i18n);
        const localeConfig = tenantConfigs[locale];
        const theme = globalisationServices.getTheme(locale);

        return {
            isDismissed: false,
            copy: { ...localeConfig },
            theme
        };
    },
    computed: {
        icon () {
            return `${this.type}Icon`;
        },

        ariaLiveAttribute () {
            return this.type === 'success' || this.type === 'danger'
                ? 'polite'
                : 'off';
        }
    },
    methods: {
        dismiss () {
            this.isDismissed = true;
        }
    }
};
</script>

<style lang="scss" module>
@use  '@justeat/fozzie/src/scss/fozzie' as f;

$alert-borderRadius: f.$radius-rounded-c;

.c-alert {
    position: relative;
    padding: f.spacing(d);
    margin-top: f.spacing(d);
    border: 0;
    border-radius: $alert-borderRadius;
}

.c-alert-headingContainer {
    display: flex;
    align-items: center;
}

.c-alert--success {
    @include f.alert-variant(f.$color-support-positive-02, f.$color-content-default);
    path {
        fill: f.$color-support-positive;
    }
}

.c-alert--warning {
    @include f.alert-variant(f.$color-support-warning-02, f.$color-content-default);
    path {
        fill: f.$color-support-warning;
    }
}

.c-alert--danger {
    @include f.alert-variant(f.$color-support-error-02, f.$color-content-default);
    path {
        fill: f.$color-support-error;
    }
}

.c-alert--info {
    @include f.alert-variant(f.$color-support-info-02, f.$color-content-default);
    path {
        fill: f.$color-support-info;
    }
}

.c-alert-heading {
    @include f.font-size(subheading-s);
    vertical-align: middle;
    margin-top: 0;
    margin-left: f.spacing(d);
    margin-bottom: f.spacing(a);
}

.c-alert-content {
    @include f.font-size(body-l);
    margin-left: f.spacing(g);
}

.c-alert-icon {
    width: 23px;
    height: 23px;
}

.c-alert-dismiss {
    margin-left: auto;
    z-index: f.zIndex(high);

    &:hover {
        cursor: pointer;
    }
}

.c-alert-dismiss-icon {
    width: 20px !important;
    height: 20px !important;
    path {
        fill: f.$color-content-subdued;
    }
}
</style>
