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

/// List Theme
///
/// PRIMARY TOKENS:
/// - `$background` or `$item-background` - The list/item background. Auto-derives: header-background, item-background-hover, item-background-active, item-background-selected, all text/action/thumbnail colors.
///
/// 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 list background color. PRIMARY - derives item-background if not set.
/// @param {Color} $header-background [null] - The list header background color. Auto-derived from background or item-background.
/// @param {Color} $header-text-color [null] - The list header text color. Auto-derived from header-background.
/// @param {Color} $item-background [null] - The list item background color. PRIMARY - derives all item state colors.
/// @param {Color} $item-background-hover [null] - The list item hover background color. Auto-derived from item-background.
/// @param {Color} $item-background-active [null] - The active list item background color. Auto-derived from item-background-hover.
/// @param {Color} $item-background-selected [null] - The selected list item background color. Auto-derived from item-background-active.
/// @param {Color} $item-text-color [null] - The list item text color. Auto-derived from item-background.
/// @param {Color} $item-text-color-hover [null] - The list item hover text color. Auto-derived from item-background-hover.
/// @param {Color} $item-text-color-active [null] - The active list item text color. Auto-derived from item-background-active.
/// @param {Color} $item-text-color-selected [null] - The selected list item text color. Auto-derived from item-background-selected.
/// @param {Color} $item-title-color [null] - The list item title color. Auto-derived from item-text-color.
/// @param {Color} $item-title-color-hover [null] - The list item hover title color. Auto-derived from item-text-color-hover.
/// @param {Color} $item-title-color-active [null] - The active list item title color. Auto-derived from item-text-color-active.
/// @param {Color} $item-title-color-selected [null] - The selected list item title color. Auto-derived from item-text-color-selected.
/// @param {Color} $item-subtitle-color [null] - The list item subtitle color. Auto-derived from item-text-color (muted).
/// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color. Auto-derived from item-text-color-hover (muted).
/// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color. Auto-derived from item-text-color-active (muted).
/// @param {Color} $item-subtitle-color-selected [null] - The selected list item subtitle color. Auto-derived from item-text-color-selected (muted).
/// @param {Color} $item-action-color [null] - The list item action color. Auto-derived from item-text-color.
/// @param {Color} $item-action-color-hover [null] - The list item hover action color. Auto-derived from item-text-color-hover.
/// @param {Color} $item-action-color-active [null] - The active list item action color. Auto-derived from item-text-color-active.
/// @param {Color} $item-action-color-selected [null] - The selected list item action color. Auto-derived from item-text-color-selected.
/// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color. Auto-derived from item-text-color.
/// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color. Auto-derived from item-text-color-hover.
/// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color. Auto-derived from item-text-color-active.
/// @param {Color} $item-thumbnail-color-selected [null] - The selected list item thumbnail color. Auto-derived from item-text-color-selected.
/// @param {List} $border-radius [null] - The border radius used for list component.
/// @param {List} $item-border-radius [null] - The border radius used for list item.
/// @param {Color} $border-width [null] - The list border width.
/// @param {Number} $border-color [null] - The list border color. Auto-derived from item-background (fluent/bootstrap).
/// @requires $light-material-schema
/// @example scss - Change the list background color
///   $my-list-theme: list-theme($background: black);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-list-theme);
@function list-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $item-border-radius: null,
    $background: null,
    $header-background: null,
    $header-text-color: null,
    $item-background: null,
    $item-background-hover: null,
    $item-background-active: null,
    $item-background-selected: null,
    $item-text-color: null,
    $item-text-color-hover: null,
    $item-text-color-active: null,
    $item-text-color-selected: null,
    $item-title-color: null,
    $item-title-color-hover: null,
    $item-title-color-active: null,
    $item-title-color-selected: null,
    $item-subtitle-color: null,
    $item-subtitle-color-hover: null,
    $item-subtitle-color-active: null,
    $item-subtitle-color-selected: null,
    $item-action-color: null,
    $item-action-color-hover: null,
    $item-action-color-active: null,
    $item-action-color-selected: null,
    $item-thumbnail-color: null,
    $item-thumbnail-color-hover: null,
    $item-thumbnail-color-active: null,
    $item-thumbnail-color-selected: null,
    $border-color: null,
    $border-width: null
) {
    $selector: #{config.element-prefix() + '-' + 'list'};
    $list-schema: ();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @if not($item-subtitle-color-active) and $item-text-color-active {
        $item-subtitle-color-active: hsl(from var(--item-text-color-active) h s l / 0.74);
    }

    @if not($item-subtitle-color-selected) and $item-text-color-selected {
        $item-subtitle-color-selected: hsl(from var(--item-text-color-selected) h s l / 0.74);
    }

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

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

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

    @return extend(
        $theme,
        (
            selector: $selector,
            border-radius: $border-radius,
            item-border-radius: $item-border-radius,
            background: $background,
            header-background: $header-background,
            header-text-color: $header-text-color,
            item-background: $item-background,
            item-background-hover: $item-background-hover,
            item-background-active: $item-background-active,
            item-background-selected: $item-background-selected,
            item-text-color: $item-text-color,
            item-text-color-hover: $item-text-color-hover,
            item-text-color-active: $item-text-color-active,
            item-text-color-selected: $item-text-color-selected,
            item-title-color: $item-title-color,
            item-title-color-hover: $item-title-color-hover,
            item-title-color-active: $item-title-color-active,
            item-title-color-selected: $item-title-color-selected,
            item-subtitle-color: $item-subtitle-color,
            item-subtitle-color-hover: $item-subtitle-color-hover,
            item-subtitle-color-active: $item-subtitle-color-active,
            item-subtitle-color-selected: $item-subtitle-color-selected,
            item-action-color: $item-action-color,
            item-action-color-hover: $item-action-color-hover,
            item-action-color-active: $item-action-color-active,
            item-action-color-selected: $item-action-color-selected,
            item-thumbnail-color: $item-thumbnail-color,
            item-thumbnail-color-hover: $item-thumbnail-color-hover,
            item-thumbnail-color-active: $item-thumbnail-color-active,
            item-thumbnail-color-selected: $item-thumbnail-color-selected,
            border-color: $border-color,
            border-width: $border-width,
        )
    );
}