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

@include iro.props-namespace('text-field') {
    @include iro.props-store((
        --dims: (
            --padding-x:     .6rem,
            --padding-y:     .5rem,
            --border-width:  iro.props-get(--dims --border-width --thin, $global: true),
            --border-radius: 2px,

            --focus: (
                --border-width:  iro.props-get(--dims --border-width --medium, $global: true),
            )
        ),
        --colors: (
            --bg:          iro.props-get(--colors --bg-hi2, $global: true),
            --placeholder: iro.props-get(--colors --fg-hi2, $global: true),
            --text:        iro.props-get(--colors --fg, $global: true),
            --border:      iro.props-get(--colors --obj-lo, $global: true),
            --shadow:      0 0 0 0 transparent,
    
            --hover: (
                --border: iro.props-get(--colors --fg-hi2, $global: true),
                --shadow: 0 0 0 0 transparent,
            ),
            --focus: (
                --border: iro.props-get(--colors --accent --primary, $global: true),
                --shadow: 0 0 0 0 transparent,
            ),
            --key-focus: (
                --border: iro.props-get(--colors --focus --fill, $global: true),
                --shadow: iro.props-get(--colors --focus --shadow, $global: true),
            ),
            --error: (
                --border: iro.props-get(--colors --accent --error-hi, $global: true),
                --shadow: 0 0 0 0 transparent,
    
                --hover: (
                    --border: iro.props-get(--colors --accent --error, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
                --focus: (
                    --border: iro.props-get(--colors --accent --error, $global: true),
                    --shadow: 0 0 0 0 transparent,
                ),
            ),
            --disabled: (
                --bg:          iro.props-get(--colors --obj-hi, $global: true),
                --placeholder: iro.props-get(--colors --fg-hi3, $global: true),
                --text:        iro.props-get(--colors --fg-hi3, $global: true),
                --border:      iro.props-get(--colors --obj-hi, $global: true),
                --shadow:      0 0 0 0 transparent,
            ),
        ),
    ));

    @include iro.bem-object(iro.props-namespace()) {
        position:         relative;
        min-width:        0;
        padding:          iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
        background-color: iro.props-get(--colors --bg);

        @include iro.bem-elem('bg') {
            display:          block;
            position:         absolute;
            top:              0;
            right:            0;
            bottom:           0;
            left:             0;
            border:           iro.props-get(--dims --border-width) solid iro.props-get(--colors --border);
            border-radius:    iro.props-get(--dims --border-radius);
            box-shadow:       iro.props-get(--colors --shadow);
            pointer-events:   none;
        }

        @include iro.bem-elem('native') {
            @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
    
            color:  iro.props-get(--colors --text);
            resize: none;

            &::placeholder {
                opacity:    1;
                color:      iro.props-get(--colors --placeholder);
                font-style: italic;
            }

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

            &:focus {
                outline: 0;

                @include iro.bem-sibling-elem('bg') {
                    $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width));

                    top:           $offset;
                    right:         $offset;
                    bottom:        $offset;
                    left:          $offset;
                    border:        iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border);
                    border-radius: calc(iro.props-get(--dims --border-radius) - $offset);
                    box-shadow:    iro.props-get(--colors --focus --shadow);
                }
            }

            &:invalid {
                @include iro.bem-sibling-elem('bg') {
                    border-color: iro.props-get(--colors --error --border);
                    box-shadow:   iro.props-get(--colors --error --shadow);
                }

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

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

            @include iro.bem-at-theme('keyboard') {
                &:focus {
                    @include iro.bem-sibling-elem('bg') {
                        border-color: iro.props-get(--colors --key-focus --border);
                        box-shadow:   iro.props-get(--colors --key-focus --shadow);
                    }
                }
            }
        }

        @include iro.bem-modifier('fill') {
            padding: 0;

            @include iro.bem-elem('native') {
                padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
            }
        }

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

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

                &::placeholder {
                    color: iro.props-get(--colors --disabled --placeholder);
                }
            }

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