@use 'iro-sass/src/index' as iro;
@use '../vars';
@use '../mixins/typography';

@mixin button-variant($variant) {
    border-color:     iro.props-get((--colors, --#{$variant}, --bg));
    background-color: iro.props-get((--colors, --#{$variant}, --bg));
    box-shadow:       iro.props-get((--colors, --#{$variant}, --shadow));
    color:            iro.props-get((--colors, --#{$variant}, --label));

    @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
        &:hover {
            border-color:     iro.props-get((--colors, --#{$variant}, --hover, --bg));
            background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg));
            box-shadow:       iro.props-get((--colors, --#{$variant}, --hover, --shadow));
            color:            iro.props-get((--colors, --#{$variant}, --hover, --label));
        }

        &:active {
            border-color:     iro.props-get((--colors, --#{$variant}, --active, --bg));
            background-color: iro.props-get((--colors, --#{$variant}, --active, --bg));
            box-shadow:       iro.props-get((--colors, --#{$variant}, --active, --shadow));
            color:            iro.props-get((--colors, --#{$variant}, --active, --label));
        }
    }

    @include iro.bem-modifier('outline') {
        background-color: transparent;
        box-shadow:       none;
        color:            iro.props-get((--colors, --#{$variant}, --outline-label));
    }
}

@include iro.props-namespace('button') {
    @include iro.props-store((
        --dims: (
            --padding-x: 1.2rem,
            --padding-y: .5rem,
            --rounding:  10em,
        ),
        --colors: (
            --any: (
                --disabled: (
                    --bg:     iro.props-get(--colors --obj-hi, $global: true),
                    --label:  iro.props-get(--colors --fg-hi3, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
                --key-focus: (
                    --bg:     transparent,
                    --label:  iro.props-get(--colors --accent --primary-lo2, $global: true),
                    --border: iro.props-get(--colors --focus --fill, $global: true),
                    --shadow: iro.props-get(--colors --focus --shadow, $global: true),
                ),
            ),
            --accent: (
                --bg:            iro.props-get(--colors --accent --primary, $global: true),
                --label:         iro.props-get(--colors --accent --primary-fg, $global: true),
                --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true),
                --shadow:        0 0 0 0 transparent,

                --hover: (
                    --bg:     iro.props-get(--colors --accent --primary-lo, $global: true),
                    --label:  iro.props-get(--colors --accent --primary-fg, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
                --active: (
                    --bg:     iro.props-get(--colors --accent --primary-lo2, $global: true),
                    --label:  iro.props-get(--colors --accent --primary-fg, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
            ),
            --primary: (
                --bg:            iro.props-get(--colors --fg, $global: true),
                --label:         iro.props-get(--colors --bg-hi2, $global: true),
                --outline-label: iro.props-get(--colors --fg, $global: true),
                --shadow:        0 0 0 0 transparent,

                --hover: (
                    --bg:     iro.props-get(--colors --fg-lo, $global: true),
                    --label:  iro.props-get(--colors --bg-hi2, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
                --active: (
                    --bg:     iro.props-get(--colors --fg-lo, $global: true),
                    --label:  iro.props-get(--colors --bg-hi2, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
            ),
            --secondary: (
                --bg:            iro.props-get(--colors --obj-hi, $global: true),
                --label:         iro.props-get(--colors --fg, $global: true),
                --outline-label: iro.props-get(--colors --fg, $global: true),
                --shadow:        0 0 0 0 transparent,

                --hover: (
                    --bg:     iro.props-get(--colors --obj, $global: true),
                    --label:  iro.props-get(--colors --fg-lo, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
                --active: (
                    --bg:     iro.props-get(--colors --obj-lo, $global: true),
                    --label:  iro.props-get(--colors --fg-lo, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
            ),
        ),
    ));

    @include iro.bem-object(iro.props-namespace()) {
        @include typography.set-font(vars.$font--main, (weight: 500));

        display:         inline-block;
        padding:         iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
        border:          2px solid transparent;
        border-radius:   iro.props-get(--dims --rounding);
        line-height:     1;
        text-align:      center;
        text-decoration: none;
    
        @include iro.bem-modifier('block') {
            display: block;
        }
    
        @include iro.bem-modifier('native') {
            @include iro.bem-modifier('block') {
                box-sizing: border-box;
                width:      100%;
            }
        }
    
        @include button-variant('secondary');
    
        @each $mod in ('accent' 'primary' 'secondary') {
            @if $mod != 'secondary' {
                @include iro.bem-modifier($mod) {
                    // sass-lint:disable-block function-name-format
                    @include button-variant($mod);
                }
            }
        }

        @include iro.bem-at-theme('keyboard') {
            &:focus {
                border-color:     iro.props-get(--colors --any --key-focus --border);
                background-color: iro.props-get(--colors --any --key-focus --bg);
                box-shadow:       iro.props-get(--colors --any --key-focus --shadow);
                color:            iro.props-get(--colors --any --key-focus --label);
            }
        }
    
        @include iro.bem-is('disabled') {
            border-color:     iro.props-get(--colors --any --disabled --bg);
            background-color: iro.props-get(--colors --any --disabled --bg);
            box-shadow:       iro.props-get(--colors --any --disabled --shadow);
            color:            iro.props-get(--colors --any --disabled --label);
    
            @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
                &:hover,
                &:active {
                    border-color:     iro.props-get(--colors --any --disabled --bg);
                    background-color: iro.props-get(--colors --any --disabled --bg);
                    box-shadow:       iro.props-get(--colors --any --disabled --shadow);
                    color:            iro.props-get(--colors --any --disabled --label);
                }
            }
    
            @include iro.bem-modifier('outline') {
                background-color: transparent;
                box-shadow:       none;
            }
        }
    }
}