<template>
    <div
        :style="cssVars"
        :class="['svgIcon', {hovered:isHover}, {active:isActive}, {inheritIconColor: inheritIconColor}, {ignoreWhite: ignoreWhite}]"
        @mouseover="isHover = true"
        @mouseout="isHover = false">
        <slot></slot>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    // @ts-ignore
    import themeVariables from '../../assets/scss/colors.scss';

    const ICON_SMALL_MEDIA_QUERY = 807;

    export default Vue.extend({
        props: {
            iconColor: {
                type: String,
                default(): string {
                    return themeVariables.gray700;
                },
            },
            iconHoverColor: {
                type: String,
                default(): string {
                    return themeVariables.gray800;
                },
            },
            iconActiveColor: {
                type: String,
                default(): string {
                    return themeVariables.gray1000;
                },
            },
            isActive: {
                type: Boolean,
                default: false,
            },
            inheritIconColor: {
                type: Boolean,
                default: false,
            },
            ignoreWhite: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                isHover: false,
                iconIsBig: false,
            };
        },
        computed: {
            cssVars(): object {
                return {
                    '--icon-color': this.iconColor,
                    '--hover-color': this.iconHoverColor,
                    '--active-color': this.iconActiveColor,
                };
            },
        },
        methods: {
            resetIconSize(): void {
                this.iconIsBig = window.innerHeight > ICON_SMALL_MEDIA_QUERY;
            },
        },
        mounted(): void {
            this.resetIconSize();
        },
    });
</script>

<style scoped lang="scss">
    @import "svgIcon";
</style>
