@use 'iro-sass/src/iro-sass' as iro;
@use '../functions' as fn;

@mixin invalid {
    $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
    
    @include iro.bem-sibling-elem('bg') {
        inset-block:   $focus-border-offset;
        inset-inline:  $focus-border-offset;
        border:        fn.dim(--focus --border) solid fn.color(--error --border);
        border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
    }

    &:hover {
        @include iro.bem-sibling-elem('bg') {
            border-color: fn.color(--error --hover --border);
        }
    }

    &:focus {
        @include iro.bem-sibling-elem('bg') {
            border-color: fn.color(--error --focus --border);
        }
    }
}

@mixin keyboard-focus {
    @include iro.bem-sibling-elem('bg') {
        border-color:   fn.color(--key-focus --border);
        outline:        fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
        //outline-offset: fn.dim(--focus --border);
    }
}

@include iro.props-namespace('text-field') {
    @include iro.props-store((
        --dims: (
            --line-height: 1.4,
            --pad-i:       fn.global-dim(--size --125),
            --pad-b:       fn.global-dim(--size --125),
            --border:      fn.global-dim(--border --thin),
            --rounding:    fn.global-dim(--rounding),

            --extended: (
                --pad:     fn.global-dim(--size --50),
            ),

            --focus: (
                --border:  fn.global-dim(--border --medium),
            ),
            
            --key-focus: (
                --border: fn.global-dim(--key-focus --outline),
            ),
        ),
        --colors: (
            --bg:          fn.global-color(--base --50),
            --placeholder: fn.global-color(--text-mute-more),
            --text:        fn.global-color(--text),
            --border:      fn.global-color(--border-strong),
    
            --hover: (
                --border: fn.global-color(--text-mute-more),
            ),
            --focus: (
                --border: fn.global-color(--focus --border),
            ),
            --key-focus: (
                --border:  fn.global-color(--focus --border),
                --outline: fn.global-color(--focus --outline),
            ),
            --error: (
                --border: fn.global-color(--negative --700),
    
                --hover: (
                    --border: fn.global-color(--negative --900),
                ),
                --focus: (
                    --border: fn.global-color(--negative --900),
                ),
            ),
            --disabled: (
                --bg:          fn.global-color(--border-mute),
                --placeholder: fn.global-color(--text-disabled),
                --text:        fn.global-color(--text-disabled),
                --border:      fn.global-color(--border-mute),
            ),
        ),
    ));

    @include iro.bem-object(iro.props-namespace()) {
        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
        
        position:         relative;
        min-inline-size:  0;
        background-color: fn.color(--bg);
        border-radius:    fn.dim(--rounding);

        @include iro.bem-elem('bg') {
            position:       absolute;
            inset-block:    0;
            inset-inline:   0;
            display:        block;
            pointer-events: none;
            border:         fn.dim(--border) solid fn.color(--border);
            border-radius:  fn.dim(--rounding);
        }

        @include iro.bem-elem('native') {
            box-sizing:       border-box;
            inline-size:      100%;
            padding-block:    calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
            padding-inline:   fn.dim(--pad-i);
            font:             inherit;
            line-height:      fn.dim(--line-height);
            color:            fn.color(--text);
            appearance:       none;
            resize:           none;
            background-color: transparent;
            border:           1px solid transparent;

            &::placeholder {
                font-style: italic;
                color:      fn.color(--placeholder);
                opacity:    1;
            }

            &:hover {
                @include iro.bem-sibling-elem('bg') {
                    border-color: fn.color(--hover --border);
                }
            }

            &:focus {
                outline: 0;

                @include iro.bem-sibling-elem('bg') {
                    inset-block:   $focus-border-offset;
                    inset-inline:  $focus-border-offset;
                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
                    border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
                }
            }

            &:invalid {
                @include invalid;
            }

            &:focus-visible,
            &:invalid:focus-visible {
                @include keyboard-focus;
            }
        }

        @include iro.bem-modifier('extended') {
            padding: fn.dim(--extended --pad);

            @include iro.bem-multi('&', 'elem' 'bg') {
                border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
            }

            @include iro.bem-elem('native') {
                &:focus {
                    @include iro.bem-sibling-elem('bg') {
                        border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
                    }
                }
            }
        }

        @include iro.bem-is('invalid') {
            @include iro.bem-elem('native') {
                @include invalid;

                &:focus-visible {
                    @include keyboard-focus;
                }
            }
        }

        @include iro.bem-is('disabled') {
            background-color: fn.color(--disabled --bg);

            @include iro.bem-elem('native') {
                color: fn.color(--disabled --text);

                &::placeholder {
                    color: fn.color(--disabled --placeholder);
                }
            }

            @include iro.bem-elem('bg') {
                border-color: fn.color(--disabled --border);
            }

            @include iro.bem-is('invalid') {
                @include iro.bem-elem('native') {
                    @include iro.bem-sibling-elem('bg') {
                        border-color: fn.color(--disabled --border);
                    }
                }
            }

            @include iro.bem-elem('native') {
                &:invalid {
                    @include iro.bem-sibling-elem('bg') {
                        border-color: fn.color(--disabled --border);
                    }
                }
            }
        }
    }
}