@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>
////

/// Tabs Theme
///
/// PRIMARY TOKENS:
/// - `$item-background` — The tabs header background.
/// - `$item-active-color` — The active tab text color.
///
/// Setting just `$item-background` will theme all tab states consistently.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $item-text-color [null] - The color used for the tab text color. Auto-derived from item-background or synced with item-icon-color.
/// @param {Color} $item-background [null] - The background color used for the tabs header. PRIMARY - derives most colors.
/// @param {Color} $item-hover-background [null] - The background used for the tabs on hover. Auto-derived from item-background.
/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover. Auto-derived from item-text-color or item-hover-background.
/// @param {Color} $item-icon-color [null] - The color used for the tab icon. Auto-derived from item-background or synced with item-text-color.
/// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon. Auto-derived from item-active-color or item-active-background.
/// @param {Color} $item-active-hover-icon-color [null] - The color used for the active tab icon on hover and focus. Auto-derived from item-active-icon-color.
/// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover. Auto-derived from item-icon-color or item-hover-background.
/// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.
/// @param {Color} $item-active-color [null] - The color used for the active tabs text. PRIMARY for active/indicator - derives indicator-color.
/// @param {Color} $item-active-hover-color [null] - The color used for the active tabs text on hover and focus. Auto-derived from item-active-color.
/// @param {Color} $item-active-background [null] - The color used for the active tab background. Auto-derived from item-background.
/// @param {Color} $item-active-hover-background [null] - The color used for the active tab background on hover and focus. Auto-derived from item-active-background.
/// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.
/// @param {Color} $indicator-color [null] - The color used for the active tab indicator. Auto-derived from item-active-color.
/// @param {Color} $button-color [null] - The color used for the button icon/text color. Auto-derived from button-background or item-text-color.
/// @param {Color} $button-hover-color [null] - The color used for the button icon/text color on hover. Auto-derived from button-color or button-hover-background.
/// @param {Color} $button-disabled-color [null] - The color used for the disabled button icon/text. Auto-derived from button-color.
/// @param {Color} $button-background [null] - The color used for the button background. Auto-derived from item-background.
/// @param {Color} $button-hover-background [null] - The color used for the button background on hover. Auto-derived from item-background or button-background.
/// @param {List} $border-radius [null] - The border radius for the tabs.
/// @param {Color} $border-color [null] - The border color of the tabs. Auto-derived from item-background (bootstrap).
/// @param {Color} $border-color--hover [null] - The border color of the tabs on hover. Auto-derived from border-color.
/// @param {Color} $tab-ripple-color [null] - The color used for the tab ripple effect. Auto-derived from item-active-background or item-background.
/// @param {Color} $button-ripple-color [null] - The color used for the button ripple effect. Auto-derived from button-color.
/// @requires $light-material-schema
/// @example scss - Set a custom background color
///   $my-tabs-theme: tabs-theme(
///      $item-background: orange
///    );
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-tabs-theme);
@function tabs-theme(
    $schema: $light-material-schema,
    $item-text-color: null,
    $item-background: null,
    $item-hover-background: null,
    $item-hover-color: null,
    $item-icon-color: null,
    $item-active-icon-color: null,
    $item-active-hover-icon-color: null,
    $item-hover-icon-color: null,
    $item-disabled-icon-color: null,
    $item-active-color: null,
    $item-active-hover-color: null,
    $item-active-background: null,
    $item-active-hover-background: null,
    $item-disabled-color: null,
    $indicator-color: null,
    $button-color: null,
    $button-background: null,
    $button-hover-background: null,
    $button-hover-color: null,
    $button-disabled-color: null,
    $tab-ripple-color: null,
    $button-ripple-color: null,
    $border-radius: null,
    $border-color: null,
    $border-color--hover: null
) {
    $selector: #{config.element-prefix() + '-' + 'tabs'};
    $tabs-schema: ();

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

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

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

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

    @if not($item-background) {
        @if not($item-text-color) and $item-icon-color {
            $item-text-color: var(--item-icon-color);
        }

        @if not($item-icon-color) and $item-text-color {
            $item-icon-color: var(--item-text-color);
        }
    } @else {
        @if not($item-text-color) and $item-background {
            $item-text-color: hsl(from adaptive-contrast(var(--item-background)) h s l / 0.8);
        }

        @if not($item-icon-color) and $item-background {
            $item-icon-color: hsl(from adaptive-contrast(var(--item-background) h s l / 0.8));
        }
    }

    @if not($item-active-icon-color) and $item-active-color {
        $item-active-icon-color: var(--item-active-color);
    }

    @if not($item-active-color) and $item-active-icon-color {
        $item-active-color: var(--item-active-icon-color);
    }

    @if not($item-active-hover-color) and $item-active-color {
        $item-active-hover-color: var(--item-active-color);
    }

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

    @if not($item-active-background) {
        @if $variant != 'bootstrap' and $variant != 'material' {
            @if not($item-active-icon-color) and $item-icon-color {
                $item-active-icon-color: var(--item-icon-color);
            }

            @if not($item-active-color) and $item-text-color {
                $item-active-color: var(--item-text-color);
            }
        }
    } @else {
        @if not($item-active-icon-color) and $item-active-background {
            $item-active-icon-color: adaptive-contrast(var(--item-active-background));
        }

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

        @if not($item-active-hover-icon-color) and $item-active-hover-background {
            $item-active-hover-icon-color: adaptive-contrast(var(--item-active-hover-background));
        }

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

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

        @if not($item-hover-icon-color) and $item-icon-color {
            $item-hover-icon-color: hsl(from var(--item-icon-color) h s l / 1);
        }
    } @else {
        @if not($item-hover-color) {
            $item-hover-color: adaptive-contrast(var(--item-hover-background));
        }

        @if not($item-hover-icon-color) {
            $item-hover-icon-color: adaptive-contrast(var(--item-hover-background));
        }
    }

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

    @if $variant == 'bootstrap' {
        @if not($border-color) and $item-background {
            $border-color: hsl(from adaptive-contrast(var(--item-background)) h s l / 0.5);
        }

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

            @if not($indicator-color) {
                $indicator-color: adaptive-contrast(var(--item-active-background));
            }
        }
    }

    // Button
    @if $item-background {
        @if not($button-background) and $item-background {
            $button-background: var(--item-background);
        }

        @if not($button-hover-background) and $item-background {
            $button-hover-background: dynamic-shade(var(--item-background));
        }
    } @else if not($button-background) {
        @if $variant != 'material' {
            @if not($button-color) and $item-text-color {
                $button-color: var(--item-text-color);
            }

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

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

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

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

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

    @if not($button-ripple-color) and $button-color {
        $button-ripple-color: var(--button-color);
    }

    @if not($button-disabled-color) and $button-color {
        $button-disabled-color: hsl(from var(--button-color) h s l / 0.4);
    }

    // Button end

    @if not($tab-ripple-color) and $item-active-background {
        $tab-ripple-color: text-contrast($item-active-background);
    }

    @if not($tab-ripple-color) and $item-background {
        $tab-ripple-color: text-contrast($item-background);
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            item-text-color: $item-text-color,
            item-background: $item-background,
            item-hover-color: $item-hover-color,
            item-hover-background: $item-hover-background,
            item-icon-color: $item-icon-color,
            item-active-icon-color: $item-active-icon-color,
            item-active-hover-icon-color: $item-active-hover-icon-color,
            item-hover-icon-color: $item-hover-icon-color,
            item-disabled-icon-color: $item-disabled-icon-color,
            item-active-color: $item-active-color,
            item-active-hover-color: $item-active-hover-color,
            item-active-background: $item-active-background,
            item-active-hover-background: $item-active-hover-background,
            item-disabled-color: $item-disabled-color,
            indicator-color: $indicator-color,
            button-color: $button-color,
            button-background: $button-background,
            button-hover-background: $button-hover-background,
            button-hover-color: $button-hover-color,
            button-disabled-color: $button-disabled-color,
            tab-ripple-color: $tab-ripple-color,
            button-ripple-color: $button-ripple-color,
            border-color: $border-color,
            border-color--hover: $border-color--hover,
            border-radius: $border-radius,
        )
    );
}