@use '../utility' as util;

@mixin blui-mat-form-field($primaryPalette, $accentPalette, $warnPalette, $disablePalette) {
    input {
        font-family: 'Open Sans';
    }
    input::-ms-reveal {
        display: none;
    }
    .mat-form-field {
        &.mat-primary {
            @include colored-input-styles($primaryPalette);
        }

        &.mat-accent {
            @include colored-input-styles($accentPalette);
        }

        &.mat-warn {
            @include colored-input-styles($warnPalette);
        }

        &.mat-form-field-invalid {
            @include colored-input-styles($warnPalette);
        }

        /* Disabled */
        &.mat-form-field-disabled {
            .mat-hint,
            .mat-form-field-label,
            .mat-form-field-underline,
            .mat-form-field-outline-thick,
            .mat-form-field-suffix,
            .mat-form-field-prefix,
            input::-webkit-input-placeholder {
                color: map-get($disablePalette, text);
            }

            &.mat-form-field-appearance-legacy,
            &.mat-form-field-appearance-standard {
                .mat-form-field-underline {
                    background-image: none;
                    background-color: map-get($disablePalette, text);
                }
            }

            &.mat-form-field-appearance-fill {
                .mat-form-field-underline::before {
                    background-color: map-get($disablePalette, text);
                }
                .mat-form-field-flex {
                    background-color: map-get($disablePalette, filledBackgroundColor);
                }
            }
        }
    }
}

@mixin colored-input-styles($palette) {
    &:not(.mat-form-field-disabled) {
        /* Underline */
        &.mat-form-field-appearance-legacy,
        &.mat-form-field-appearance-standard,
        &.mat-form-field-appearance-fill {
            .mat-form-field-underline,
            .mat-form-field-underline::before {
                background-color: util.map-deep-get($palette, underline, default);
            }

            .mat-form-field-flex:hover + .mat-form-field-underline {
                background-color: util.map-deep-get($palette, underline, onHover);
            }

            .mat-form-field-flex + .mat-form-field-underline .mat-form-field-ripple {
                height: 1px;
            }

            .mat-form-field-flex:focus-within + .mat-form-field-underline .mat-form-field-ripple {
                height: 2px;
            }
        }

        /* Label */
        .mat-form-field-label {
            color: util.map-deep-get($palette, label, withoutValue);
        }

        /* Filled Label */
        &.mat-form-field-should-float .mat-form-field-label {
            color: util.map-deep-get($palette, label, withValue);
        }

        /* Label Focus */
        .mat-form-field-flex:focus-within {
            .mat-form-field-label {
                color: util.map-deep-get($palette, label, onFocus);
            }
        }

        /* Icon */
        .mat-form-field-suffix,
        .mat-form-field-prefix {
            color: map-get($palette, icon);
        }

        /* Input Placeholders */
        input::-webkit-input-placeholder {
            color: map-get($palette, placeholder);
        }

        /* Hint */
        .mat-hint {
            color: map-get($palette, hint);
        }

        /* User Input Text */
        &.mat-form-field-invalid {
            .mat-input-element::selection {
                background-color: map-get($palette, highlightColor);
            }
            .mat-input-element::-moz-selection {
                background-color: map-get($palette, highlightColor);
            }
        }

        /* Standard / Legacy Variant */
        &.mat-form-field-appearance-legacy,
        &.mat-form-field-appearance-standard,
        &.mat-form-field-appearance-fill {
            .mat-form-field-flex + .mat-form-field-underline .mat-form-field-ripple {
                background-color: util.map-deep-get($palette, underline, default);
            }

            .mat-form-field-flex:hover + .mat-form-field-underline .mat-form-field-ripple {
                background-color: util.map-deep-get($palette, underline, onHover);
            }

            .mat-form-field-flex:focus-within + .mat-form-field-underline .mat-form-field-ripple {
                background-color: util.map-deep-get($palette, underline, onFocus);
            }
        }

        /* Fill Variant */
        &.mat-form-field-appearance-fill {
            .mat-form-field-flex {
                background-color: map-get($palette, filledBackgroundColor);
            }
            .mat-form-field-outline-thick {
                color: util.map-deep-get($palette, underline, default);
            }
            .mat-form-field-flex:hover .mat-form-field-outline-thick {
                color: util.map-deep-get($palette, underline, onHover);
            }
            .mat-form-field-flex:focus-within .mat-form-field-outline-thick {
                color: util.map-deep-get($palette, underline, onFocus);
            }
        }

        /* Outline Variant */
        &.mat-form-field-appearance-outline {
            .mat-form-field-outline {
                color: util.map-deep-get($palette, underline, default);
            }
            .mat-form-field-outline-thick {
                .mat-form-field-outline-start,
                .mat-form-field-outline-end,
                .mat-form-field-outline-gap {
                    border-width: 1px;
                }
                color: util.map-deep-get($palette, underline, default);
            }
            .mat-form-field-flex:hover .mat-form-field-outline-thick {
                color: util.map-deep-get($palette, underline, onHover);
            }
            .mat-form-field-flex:focus-within .mat-form-field-outline-thick {
                color: util.map-deep-get($palette, underline, onFocus);
                .mat-form-field-outline-start,
                .mat-form-field-outline-end,
                .mat-form-field-outline-gap {
                    border-width: 2px;
                }
            }
        }
    }
}