<template>
    <div
        class="sf-bottom-navigation-item"
        :class="{
            'is-active': isActive,
            'is-floating': isFloating,
            center: !icon || !label,
        }"
        v-on="$listeners"
    >
        <slot name="icon" v-bind="{ icon, iconActive, iconSize, isFloating }">
            <SfCircleIcon
                v-if="isFloating"
                :icon="icon"
                icon-color="white"
                icon-size="28px"
                :aria-label="label"
            />
            <SfButton
                v-else-if="icon"
                class="sf-button--pure sf-bottom-navigation-item__icon"
                :aria-label="label"
            >
                <SfIcon :icon="currentIcon" :size="iconSize" />
            </SfButton>
        </slot>
        <slot name="label" v-bind="{ label }">
            <div
                v-if="label"
                class="sf-bottom-navigation-item__label"
                :class="{
                    'has-margin': icon,
                }"
            >
                {{ label }}
            </div>
        </slot>
    </div>
</template>
<script>
    import SfIcon from '../../../atoms/SfIcon/SfIcon.vue';
    import SfCircleIcon from '../../../atoms/SfCircleIcon/SfCircleIcon.vue';
    import SfButton from '../../../atoms/SfButton/SfButton.vue';
    import { focus } from '../../../utilities/directives';

    export default {
        name: 'SfBottomNavigationItem',
        directives: { focus },
        components: {
            SfCircleIcon,
            SfIcon,
            SfButton,
        },
        props: {
            icon: {
                type: [String, Array],
                default: '',
            },
            isActive: {
                type: Boolean,
                default: false,
            },
            iconActive: {
                type: String,
                default: '',
            },
            label: {
                type: String,
                default: '',
            },
            iconSize: {
                type: String,
                default: '20px',
            },
            isFloating: {
                type: Boolean,
                default: false,
            },
        },
        computed: {
            currentIcon() {
                return this.isActive && this.iconActive
                    ? this.iconActive
                    : this.icon;
            },
        },
    };
</script>
