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

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

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $background [null] - The list background color.
/// @param {Color} $header-background [null] - The list header background color.
/// @param {Color} $header-text-color [null] - The list header text color.
/// @param {Color} $item-background [null] - The list item background color.
/// @param {Color} $item-background-hover [null] - The list item hover background color.
/// @param {Color} $item-background-active [null] - The active list item background color.
/// @param {Color} $item-background-selected [null] - The selected list item background color.
/// @param {Color} $item-text-color [null] - The list item text color.
/// @param {Color} $item-text-color-hover [null] - The list item hover text color.
/// @param {Color} $item-text-color-active [null] - The active list item text color.
/// @param {Color} $item-text-color-selected [null] - The selected list item text color.
/// @param {Color} $item-title-color [null] - The list item title color.
/// @param {Color} $item-title-color-hover [null] - The list item hover title color.
/// @param {Color} $item-title-color-active [null] - The active list item title color.
/// @param {Color} $item-title-color-selected [null] - The selected list item title color.
/// @param {Color} $item-subtitle-color [null] - The list item subtitle color.
/// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color.
/// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color.
/// @param {Color} $item-subtitle-color-selected [null] - The selected list item subtitle color.
/// @param {Color} $item-action-color [null] - The list item action color.
/// @param {Color} $item-action-color-hover [null] - The list item hover action color.
/// @param {Color} $item-action-color-active [null] - The active list item action color.
/// @param {Color} $item-action-color-selected [null] - The selected list item action color.
/// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color.
/// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color.
/// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color.
/// @param {Color} $item-thumbnail-color-selected [null] - The selected list item thumbnail color.
/// @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.
/// @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
) {
    $name: 'igx-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: hsl(from var(--item-background) h s calc(l * 0.9));
    }

    @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-background {
        $item-title-color: adaptive-contrast(var(--item-background));
    }

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

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

    @if not($item-subtitle-color) and $item-background {
        $item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) 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-background-hover {
        $item-title-color-hover: adaptive-contrast(var(--item-background-hover));
    }

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

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

    @if not($item-subtitle-color-hover) and $item-background-hover {
        $item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / 0.74);
    }

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

    @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-background-active {
        $item-title-color-active: adaptive-contrast(var(--item-background-active));
    }

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

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

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

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

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

    @if not($item-subtitle-color-active) and $item-background-active {
        $item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / 0.74);
    }

    @if not($item-subtitle-color-selected) and $item-background-selected {
        $item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-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: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.15);
        }
    }

    @return extend(
        $theme,
        (
            name: $name,
            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,
        )
    );
}