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

@mixin invalid {
    @include iro.bem-sibling-elem('bg') {
        border-color: fn.color(--error --border);
        box-shadow:   fn.color(--error --shadow);
    }

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

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

@mixin keyboard-focus {
    @include iro.bem-sibling-elem('bg') {
        border-color: fn.color(--key-focus --border);
        box-shadow:   fn.color(--key-focus --shadow);
    }
}

@include iro.props-namespace('text-field') {
    @include iro.props-store((
        --dims: (
            --pad-x:    fn.global-dim(--size --125),
            --pad-y:    fn.global-dim(--size --125),
            --border:   fn.global-dim(--border --thin),
            --rounding: 2px,

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

            --focus: (
                --border:  fn.global-dim(--border --medium),
            )
        ),
    ), 'dims');

    @include iro.props-store((
        --colors: (
            --bg:          fn.global-color(--bg-hi2),
            --placeholder: fn.global-color(--fg-hi2),
            --text:        fn.global-color(--fg),
            --border:      fn.global-color(--obj-lo),
            --shadow:      0 0 0 0 transparent,
    
            --hover: (
                --border: fn.global-color(--fg-hi2),
                --shadow: 0 0 0 0 transparent,
            ),
            --focus: (
                --border: fn.global-color(--accent --primary --solid --bg),
                --shadow: 0 0 0 0 transparent,
            ),
            --key-focus: (
                --border: fn.global-color(--focus --fill),
                --shadow: fn.global-color(--focus --shadow),
            ),
            --error: (
                --border: fn.global-color(--accent --error --solid --bg-hi),
                --shadow: 0 0 0 0 transparent,
    
                --hover: (
                    --border: fn.global-color(--accent --error --solid --bg),
                    --shadow: 0 0 0 0 transparent,
                ),
                --focus: (
                    --border: fn.global-color(--accent --error --solid --bg),
                    --shadow: 0 0 0 0 transparent,
                ),
            ),
            --disabled: (
                --bg:          fn.global-color(--obj-hi),
                --placeholder: fn.global-color(--fg-hi3),
                --text:        fn.global-color(--fg-hi3),
                --border:      fn.global-color(--obj-hi),
                --shadow:      0 0 0 0 transparent,
            ),
        ),
    ), 'colors');

    @include iro.bem-object(iro.props-namespace()) {
        $line-height:         1.4;
        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));

        position:         relative;
        min-width:        0;
        border-radius:    fn.dim(--rounding);
        background-color: fn.color(--bg);

        @include iro.bem-elem('bg') {
            display:          block;
            position:         absolute;
            top:              0;
            right:            0;
            bottom:           0;
            left:             0;
            border:           fn.dim(--border) solid fn.color(--border);
            border-radius:    fn.dim(--rounding);
            box-shadow:       fn.color(--shadow);
            pointer-events:   none;
        }

        @include iro.bem-elem('native') {
            box-sizing:  border-box;
            width:       100%;
            padding:     calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x);
            border:      1px solid transparent;
            color:       fn.color(--text);
            line-height: $line-height;
            resize:      none;

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

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

            &:focus {
                outline: 0;

                @include iro.bem-sibling-elem('bg') {
                    top:           $focus-border-offset;
                    right:         $focus-border-offset;
                    bottom:        $focus-border-offset;
                    left:          $focus-border-offset;
                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
                    border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
                    box-shadow:    fn.color(--focus --shadow);
                }
            }

            &:invalid {
                @include invalid;
            }
        }

        @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(--extended --rounding) - $focus-border-offset);
                    }
                }
            }
        }

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

        @include iro.bem-at-theme('keyboard') {
            @include iro.bem-elem('native') {
                &:focus,
                &:invalid:focus {
                    @include keyboard-focus;
                }
            }

            @include iro.bem-is('invalid') {
                @include iro.bem-elem('native') {
                    &:focus {
                        @include keyboard-focus;
                    }
                }
            }
        }

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

            @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);
                    }
                }
            }
        }
    }
}