@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/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Navigation Drawer Theme
///
/// PRIMARY TOKENS:
/// - `$background` — The drawer background color.
/// - `$item-active-background` — The active item background.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background [null] - The navigation drawer background color. PRIMARY - derives all item colors.
/// @param {Color} $border-color [null] - The navigation drawer right border color.
/// @param {Color} $item-header-text-color [null] - The header's idle text color. Auto-derived from background.
/// @param {Color} $item-text-color [null] - The item's idle text color. Auto-derived from background.
/// @param {Color} $item-icon-color [null] - The item's icon color. Auto-derived from background.
/// @param {Color} $item-active-text-color [null] - The item's active text color. Auto-derived from item-active-background.
/// @param {Color} $item-active-background [null] - The item's active background color. PRIMARY for active state - derives active text/icon. Auto-derived from background.
/// @param {Color} $item-active-icon-color [null] - The item's icon active color. Auto-derived from item-active-background.
/// @param {Color} $item-hover-background [null] - The item's hover background color. Auto-derived from background.
/// @param {Color} $item-hover-text-color [null] - The item's hover text color. Auto-derived from background.
/// @param {Color} $item-hover-icon-color [null] - The item's hover icon color. Auto-derived from background.
/// @param {Color} $item-disabled-text-color [null] - The item's disabled text color. Auto-derived from background (muted).
/// @param {Color} $item-disabled-icon-color [null] - The item's disabled icon color. Auto-derived from background (muted).
/// @param {Color} $shadow [null] - Sets a custom shadow to be used by the drawer.
/// @param {List} $border-radius [null] - The border radius used for the navdrawer.
/// @param {List} $item-border-radius [null] - The border radius used for the navdrawer item.
/// @requires $light-material-schema
/// @example scss - Change the background and item colors
///   $navdrawer-theme: navdrawer-theme(
///     $background: #2d313a,
///     $item-active-background: #ecc256,
///     $item-icon-color: #ecc256
///   );
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($navdrawer-theme);
@function navdrawer-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $item-border-radius: null,

    $background: null,
    $border-color: null,

    $item-header-text-color: null,
    $item-text-color: null,
    $item-icon-color: null,

    $item-active-text-color: null,
    $item-active-background: null,
    $item-active-icon-color: null,

    $item-hover-background: null,
    $item-hover-text-color: null,
    $item-hover-icon-color: null,

    $item-disabled-text-color: null,
    $item-disabled-icon-color: null,
    $shadow: null
) {
    $selector: #{config.element-prefix() + '-' + 'nav-drawer'};
    $navdrawer-schema: ();

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

    $theme: digest-schema($navdrawer-schema);

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

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

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

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

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

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

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

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

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

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

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

    @if not($shadow) {
        $elevation: map.get($navdrawer-schema, 'elevation');
        $shadow: elevation($elevation);
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            border-radius: $border-radius,
            item-border-radius: $item-border-radius,
            background: $background,
            border-color: $border-color,
            item-text-color: $item-text-color,
            item-active-text-color: $item-active-text-color,
            item-active-background: $item-active-background,
            item-hover-background: $item-hover-background,
            item-hover-text-color: $item-hover-text-color,
            item-header-text-color: $item-header-text-color,
            item-icon-color: $item-icon-color,
            item-active-icon-color: $item-active-icon-color,
            item-hover-icon-color: $item-hover-icon-color,
            item-disabled-text-color: $item-disabled-text-color,
            item-disabled-icon-color: $item-disabled-icon-color,
            elevation: $shadow,
        )
    );
}