<template>
    <div class="menu" :class="[alignment(), {'full-width': fullWidth, 'tab-item': tabItem}]">
        <div class="menu-activator" @click.stop="show" :class="{button: button}">
            <div v-if="title && iconPath" class="title">
                <img :src="iconPath">
                {{ title }}
            </div>
            <div v-else-if="title" class="title">
                {{ title }}
            </div>
            <div v-else-if="iconPath" class="title">
                <img :src="iconPath">
            </div>
            <div class="menu-icon" :style="iconStyle">
                <img :src="iconSrc">
            </div>
        </div>
        <transition name="fade">
            <div class="menu-items" v-show="visible">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script>
    import NuiMenuItem from './NuiMenuItem.vue'
    import MenuSvg from '../../img/icons/menu.svg'
    import MenuLightSvg from '../../img/icons/menu-light.svg'
    import DropdownSvg from '../../img/icons/dropdown.svg'

    export default {
        components: {
            NuiMenuItem
        },
        props: {
            title: {
                type: String
            },
            align: {
                type: String,
                default: 'left'
            },
            fullWidth: {
                type: Boolean,
                default: false
            },
            iconPath: {
                type: String
            },
            dropdownIcon: {
                type: String,
                default: 'menu'
            },
            button: {
                type: Boolean,
                default: false
            },
            tabItem: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            hide() {
                this.visible = false;
            },
            show() {
                this.visible = true;
            },
            alignment() {
                return `align-${this.align}`
            },
            ready() {
                document.addEventListener('click', (e) => {
                    this.hide();
                });

            }
        },
        computed: {
            iconSrc() {
                if(this.dropdownIcon === 'dropdown') {
                    return DropdownSvg;
                } else if(this.dropdownIcon === 'menu-light') {
                    return MenuLightSvg
                } else {
                    return MenuSvg;
                }
            },
            iconStyle() {
                if(this.dropdownIcon === 'dropdown') {
                    return {width: '10px'};
                } else if(this.dropdownIcon === 'menu-light') {
                    return {width: '12px', height: '24px'};
                } else {
                    return {width: '24px', height: '24px'};
                }
            }
        },
        data() {
            return {
                visible: false
            }
        },
        mounted() {
            this.ready();
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../scss/mixins";
    @import "../../scss/constants";

    .menu {
        position: relative;
        display: inline-block;
        vertical-align: middle;

        .menu-activator {
            cursor: pointer;
            display: inline-block;

            .title {
                display: inline-block;
                vertical-align: middle;
                margin-right: 8px;

                img {
                    margin-right: 8px;
                    vertical-align: middle;
                }
            }

            .menu-icon {
                display: inline-block;
                vertical-align: middle;

                svg {
                    display: inline-block;
                    vertical-align: middle;
                }
            }

            &.button {
                background-color: white;
                padding: 18px 20px;
                text-transform: uppercase;
                color: $darkGrey;
                font-family: "aktiv-grotesk", sans-serif;
                font-weight: 600;
                font-size: 14px;
                @include box-shadow(0, 2px, 16px, rgba(0, 0, 0, 0.22));
                @include border-radius(3px);

                .menu-icon {
                    margin-top: -6px;
                }
            }
        }

        &.tab-item {
            .menu-activator {
                .title {
                    display: inline-block;
                    font-family: "aktiv-grotesk", sans-serif;
                    font-size: 12px;
                    color: $darkGrey !important;
                    font-weight: 500;
                    text-transform: uppercase;
                    padding: 12px 12px;
                }

                .menu-icon {
                    margin-left: -8px;
                    margin-top: -7px;
                }
            }
        }

        .menu-items {
            position: absolute;
            z-index: 1;
            background-color: $lightGrey;
            @include box-shadow(0, 10px, 16px, rgba(0, 0, 0, 0.22));
            @include border-radius(3px);
        }

        &.full-width {
            .menu-activator {
                width: 100%;
            }

            .menu-items {
                width: 100%;
            }
        }
    }
</style>

<style lang="scss">
    .menu {
        &.align-left .menu-items {
            left: 0;
            right: initial;
        }

        &.align-right .menu-items {
            right: 0;
            left: initial;
        }
    }
</style>