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

@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:     .6rem,
            --pad-y:     .5rem,
            --border-width:  fn.global-dim(--border-width --thin),
            --border-radius: 2px,

            --focus: (
                --border-width:  fn.global-dim(--border-width --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),
                --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-hi),
                --shadow: 0 0 0 0 transparent,
    
                --hover: (
                    --border: fn.global-color(--accent --error),
                    --shadow: 0 0 0 0 transparent,
                ),
                --focus: (
                    --border: fn.global-color(--accent --error),
                    --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()) {
        position:         relative;
        min-width:        0;
        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
        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-width) solid fn.color(--border);
            border-radius:    fn.dim(--border-radius);
            box-shadow:       fn.color(--shadow);
            pointer-events:   none;
        }

        @include iro.bem-elem('native') {
            @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
    
            width:  100%;
            color:  fn.color(--text);
            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') {
                    $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));

                    top:           $offset;
                    right:         $offset;
                    bottom:        $offset;
                    left:          $offset;
                    border:        fn.dim(--focus --border-width) solid fn.color(--focus --border);
                    border-radius: calc(fn.dim(--border-radius) - $offset);
                    box-shadow:    fn.color(--focus --shadow);
                }
            }

            &:invalid {
                @include invalid;
            }
        }

        @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-modifier('fill') {
            padding: 0;

            @include iro.bem-elem('native') {
                box-sizing: border-box;
                padding:    fn.dim(--pad-y) fn.dim(--pad-x);
            }
        }

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