@use 'sass:map';
@use '../../config';
@use '../../functions' as *;
@use '../../schemas/' as *;
@use '../../../utils/map' as *;
@use '../../../color/functions' as *;
@use '../../../elevations/' as *;

////
/// @package theming
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// Outlined Button Theme
///
/// PRIMARY TOKENS:
/// - `$foreground` — The text color of the button.
/// - `$hover-background` — The hover background color.
/// - `$focus-background` — The focus background color.
/// - `$active-background` — The active background color.
///
/// For outlined buttons, the foreground color is the primary token.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background [null] - The background color of the button.
/// @param {Color} $foreground [null] - The text color of the button. PRIMARY - derives hover/focus/active backgrounds, foregrounds, and borders.
/// @param {Color} $icon-color [null] - The icon color in the button.
/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover. Auto-derived from hover-foreground.
/// @param {Color} $hover-background [null] - The hover background color. PRIMARY - derives hover-foreground. Auto-derived from foreground.
/// @param {Color} $hover-foreground [null] - The hover text color. Auto-derived from hover-background.
/// @param {Color} $focus-background [null] - The focus background color. PRIMARY - derives focus-foreground. Auto-derived from foreground.
/// @param {Color} $focus-foreground [null] - The focus text color. Auto-derived from focus-background.
/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state. Auto-derived from foreground or hover-background.
/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state. Auto-derived from focus-hover-background.
/// @param {Color} $focus-visible-background [null] - The focus-visible background color. Auto-derived from focus-background or hover-background.
/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color. Auto-derived from focus-visible-background or foreground.
/// @param {Color} $active-background [null] - The active background of the button. Auto-derived from foreground.
/// @param {Color} $active-foreground [null] - The active text color. Auto-derived from active-background.
/// @param {List} $border-radius [null] - The border radius of the button.
/// @param {Color} $border-color [null] - The border color of the button. Auto-derived from foreground.
/// @param {Color} $hover-border-color [null] - The hover border color. Auto-derived from hover-foreground or hover-background.
/// @param {Color} $focus-border-color [null] - The focus border color. Auto-derived from focus-foreground or focus-background.
/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color. Auto-derived from focus-border-color or focus-visible-background.
/// @param {Color} $active-border-color [null] - The active border color. Auto-derived from active-foreground or active-background.
/// @param {Color} $shadow-color [null] - The shadow color of the button. Auto-derived from focus-visible-foreground or focus-visible-background.
/// @param {Color} $disabled-background [null] - The disabled background color of the button.
/// @param {Color} $disabled-foreground [null] - The disabled text color. Auto-derived from foreground (bootstrap).
/// @param {Color} $disabled-icon-color [null] - The disabled icon color. Auto-derived from disabled-foreground.
/// @param {Color} $disabled-border-color [null] - The disabled border color. Auto-derived from disabled-foreground (bootstrap).
///
/// @requires $light-material-schema
///
/// @example scss - Change the text colors in outlined buttons
///   $my-button-theme: outlined-button-theme(
///     $foreground: black,
///   );
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-button-theme);
@function outlined-button-theme(
    $schema: $light-material-schema,

    $background: null,
    $foreground: null,

    $hover-background: null,
    $hover-foreground: null,

    $icon-color: $foreground,
    $icon-color-hover: $hover-foreground,

    $focus-background: null,
    $focus-foreground: null,

    $focus-hover-background: null,
    $focus-hover-foreground: null,

    $focus-visible-background: null,
    $focus-visible-foreground: null,

    $active-background: null,
    $active-foreground: null,

    $border-radius: null,
    $border-color: null,
    $hover-border-color: null,
    $focus-border-color: null,
    $focus-visible-border-color: null,
    $active-border-color: null,

    $shadow-color: null,

    $disabled-background: null,
    $disabled-foreground: null,
    $disabled-icon-color: $disabled-foreground,
    $disabled-border-color: null,
    $size: null
) {
    $selector: (
        #{'[' + config.element-prefix() + 'Button="outlined"]'},
        #{config.element-prefix() + '-' + 'button[variant="outlined"]'},
        #{'.' + config.element-prefix() + '-' + 'button--outlined'}
    );
    $button-schema: ();

    @if map.has-key($schema, 'button') {
        $button-schema: map.get($schema, 'button');

        @if map.has-key($button-schema, 'outlined') {
            $button-schema: map.get($button-schema, 'outlined');
        } @else {
            $button-schema: $schema;
        }
    }

    $theme: digest-schema($button-schema);
    $variant: map.get($schema, '_meta', 'theme');

    @if not($hover-foreground) and $hover-background {
        $hover-foreground: adaptive-contrast(var(--hover-background));
    }

    @if not($icon-color-hover) and $hover-foreground {
        $icon-color-hover: var(--hover-foreground);
    }

    @if not($focus-foreground) and $focus-background {
        $focus-foreground: adaptive-contrast(var(--focus-background));
    }

    @if not($focus-hover-foreground) and $focus-hover-background {
        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
    }

    @if not($active-foreground) and $active-background {
        $active-foreground: adaptive-contrast(var(--active-background));
    }

    @if not($focus-visible-background) and $focus-background {
        $focus-visible-background: var(--focus-background);
    }

    @if not($focus-visible-foreground) and $focus-visible-background {
        $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
    }

    @if not($focus-visible-border-color) and $focus-border-color {
        $focus-visible-border-color: var(--focus-border-color);
    }

    @if $variant == 'material' or $variant == 'fluent' {
        @if not($hover-background) and $foreground {
            $hover-background: hsl(from var(--foreground) h s l / 0.08);
        }

        @if not($focus-background) and $foreground {
            $focus-background: hsl(from var(--foreground) h s l / 0.32);
        }

        @if not($focus-hover-background) and $foreground {
            $focus-hover-background: hsl(from var(--foreground) h s l / 0.24);
        }

        @if not($active-background) and $foreground {
            $active-background: hsl(from var(--foreground) h s l / 0.16);
        }

        @if not($hover-foreground) and $hover-background {
            $hover-foreground: hsl(from var(--hover-background) h s l / 1);
        }

        @if not($focus-foreground) and $focus-background {
            $focus-foreground: hsl(from var(--focus-background) h s l / 1);
        }

        @if not($focus-hover-foreground) and $focus-hover-background {
            $focus-hover-foreground: hsl(from var(--focus-hover-background) h s l / 1);
        }

        @if not($active-foreground) and $active-background {
            $active-foreground: hsl(from var(--active-background) h s l / 1);
        }

        @if $variant == 'material' {
            @if not($focus-visible-background) and $foreground {
                $focus-visible-background: hsl(from var(--foreground) h s l / 0.16);
            }

            @if not($focus-visible-foreground) and $focus-visible-background {
                $focus-visible-foreground: hsl(from var(--focus-visible-background) h s l / 1);
            }
        } @else {
            @if not($focus-visible-foreground) and $focus-foreground {
                $focus-visible-foreground: var(--focus-foreground);
            }
        }

        @if $variant == 'fluent' {
            @if not($focus-visible-border-color) and $focus-visible-foreground {
                $focus-visible-border-color: var(--focus-visible-foreground);
            }
        }
    }

    @if $variant == 'indigo' {
        @if not($hover-background) and $foreground {
            $hover-background: hsl(from var(--foreground) h s l / 0.08);
        }

        @if not($focus-background) and $foreground {
            $focus-background: hsl(from var(--foreground) h s l / 0.08);
        }

        @if not($focus-hover-background) and $foreground {
            $focus-hover-background: hsl(from var(--foreground) h s l / 0.08);
        }

        @if not($active-background) and $foreground {
            $active-background: hsl(from var(--foreground) h s l / 0.08);
        }

        @if not($hover-foreground) and $foreground {
            $hover-foreground: dynamic-shade(var(--foreground));
        }

        @if not($focus-foreground) and $foreground {
            $focus-foreground: dynamic-shade(var(--foreground));
        }

        @if not($focus-hover-foreground) and $foreground {
            $focus-hover-foreground: dynamic-shade(var(--foreground));
        }

        @if not($focus-visible-foreground) and $foreground {
            $focus-visible-foreground: var(--foreground);
        }

        @if not($active-foreground) and $foreground {
            $active-foreground: dynamic-shade(var(--foreground));
        }

        @if not($shadow-color) and $focus-visible-foreground {
            $shadow-color: hsl(from var(--focus-visible-foreground) h s l / 0.2);
        }
    }

    @if $variant == 'bootstrap' {
        @if not($hover-background) and $foreground {
            $hover-background: var(--foreground);
        }

        @if not($hover-foreground) and $hover-background {
            $hover-foreground: adaptive-contrast(var(--hover-background));
        }

        @if not($focus-background) and $foreground {
            $focus-background: dynamic-shade(var(--foreground), $offset: 10);
        }

        @if not($focus-foreground) and $focus-background {
            $focus-foreground: adaptive-contrast(var(--focus-background));
        }

        @if not($focus-hover-background) and $hover-background {
            $focus-hover-background: dynamic-shade(var(--hover-background));
        }

        @if not($focus-hover-foreground) and $focus-hover-background {
            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
        }

        @if not($focus-visible-background) and $hover-background {
            $focus-visible-background: var(--hover-background);
        }

        @if not($focus-visible-foreground) and $focus-visible-background {
            $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
        }

        @if not($active-background) and $foreground {
            $active-background: dynamic-shade(var(--foreground), $offset: 10);
        }

        @if not($active-foreground) and $active-background {
            $active-foreground: adaptive-contrast(var(--active-background));
        }

        @if not($disabled-foreground) and $foreground {
            $disabled-foreground: hsla(from (var(--foreground) h s l / 0.5));
        }

        @if not($disabled-icon-color) and $disabled-foreground {
            $disabled-icon-color: var(--disabled-foreground);
        }

        @if not($disabled-border-color) and $disabled-foreground {
            $disabled-border-color: var(--disabled-foreground);
        }

        @if not($hover-border-color) and $hover-background {
            $hover-border-color: var(--hover-background);
        }

        @if not($focus-border-color) and $focus-background {
            $focus-border-color: var(--focus-background);
        }

        @if not($focus-visible-border-color) and $focus-visible-background {
            $focus-visible-border-color: var(--focus-visible-background);
        }

        @if not($active-border-color) and $active-background {
            $active-border-color: var(--active-background);
        }

        @if not($shadow-color) and $focus-visible-background {
            $shadow-color: hsl(from var(--focus-visible-background) h s l / 0.5);
        }
    }

    @if not($icon-color-hover) and $hover-foreground {
        $icon-color-hover: var(--hover-foreground);
    }

    @if variant != 'bootstrap' {
        @if not($border-color) and $foreground {
            $border-color: var(--foreground);
        }

        @if not($hover-border-color) and $hover-foreground {
            $hover-border-color: var(--hover-foreground);
        }

        @if not($focus-border-color) and $focus-foreground {
            $focus-border-color: var(--focus-foreground);
        }

        @if not($focus-visible-border-color) and $focus-visible-foreground {
            $focus-visible-border-color: var(--focus-visible-foreground);
        }

        @if not($active-border-color) and $active-foreground {
            $active-border-color: var(--active-foreground);
        }
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            background: $background,
            foreground: $foreground,
            icon-color: $icon-color,
            icon-color-hover: $icon-color-hover,
            hover-background: $hover-background,
            hover-foreground: $hover-foreground,
            focus-background: $focus-background,
            focus-foreground: $focus-foreground,
            focus-hover-background: $focus-hover-background,
            focus-hover-foreground: $focus-hover-foreground,
            focus-visible-background: $focus-visible-background,
            focus-visible-foreground: $focus-visible-foreground,
            active-background: $active-background,
            active-foreground: $active-foreground,
            border-radius: $border-radius,
            border-color: $border-color,
            hover-border-color: $hover-border-color,
            focus-border-color: $focus-border-color,
            focus-visible-border-color: $focus-visible-border-color,
            active-border-color: $active-border-color,
            shadow-color: $shadow-color,
            disabled-background: $disabled-background,
            disabled-foreground: $disabled-foreground,
            disabled-icon-color: $disabled-icon-color,
            disabled-border-color: $disabled-border-color,
            size: $size,
        )
    );
}