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

/// Carousel Theme
///
/// PRIMARY TOKENS:
/// - `$button-background` — The nav button background.
/// - `$indicator-background` — The indicator container background.
///
/// Button colors cascade from button-background through hover and disabled states.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $slide-background [null] - The slide background color.
/// @param {Color} $button-background [null] - The previous/next buttons idle background color. PRIMARY - derives arrow, hover, disabled, focus colors.
/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color. Auto-derived from button-background.
/// @param {Color} $button-disabled-background [null] - The previous/next buttons disabled background color. Auto-derived from button-background.
/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color. Auto-derived from button-background.
/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color. Auto-derived from button-hover-background.
/// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color. Auto-derived from button-disabled-background.
/// @param {Color} $button-border-color [null] - The previous/next buttons idle border color. Auto-derived from button-background (indigo).
/// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color. Auto-derived from button-border-color.
/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus. Auto-derived from button-focus-arrow-color or button-background.
/// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color.
/// @param {Color} $indicator-background [null] - The indicators container background color. PRIMARY - derives dot, border, active, focus colors.
/// @param {Color} $label-indicator-background [null] - The label indicator container background color.
/// @param {Color} $indicator-dot-color [null] - The idle indicator dot color. Auto-derived from indicator-background.
/// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color. Auto-derived from indicator-dot-color.
/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus. Auto-derived from indicator-background or button-background.
/// @param {Color} $indicator-border-color [null] - The idle indicator border color. Auto-derived from indicator-background or indicator-dot-color.
/// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color. Auto-derived from indicator-background or button-background.
/// @param {Color} $indicator-active-border-color [null] - The active indicator border color. Auto-derived from indicator-active-dot-color.
/// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover. Auto-derived from indicator-active-dot-color.
/// @param {List} $button-shadow [null] - Shadow underneath the previous/next buttons.
/// @param {List} $border-radius [null] - The border radius used for carousel component.
///
/// @requires $light-material-schema
///
/// @example scss - Change the previous/next button colors
///   $my-carousel-theme: carousel-theme(
///     $button-background: black,
///     $button-hover-background: white
///   );
///   // Pass the carousel theme to the css-vars() mixin
///   @include css-vars($my-carousel-theme);
@function carousel-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $button-shadow: null,

    $slide-background: null,

    $button-background: null,
    $button-hover-background: null,
    $button-disabled-background: null,
    $button-arrow-color: null,
    $button-hover-arrow-color: null,
    $button-focus-arrow-color: null,
    $button-disabled-arrow-color: null,
    $button-border-color: null,
    $button-hover-border-color: null,
    $button-focus-border-color: null,
    $button-disabled-border-color: null,

    $indicator-background: null,
    $label-indicator-background: null,
    $indicator-dot-color: null,
    $indicator-hover-dot-color: null,
    $indicator-focus-color: null,
    $indicator-border-color: null,
    $indicator-active-dot-color: null,
    $indicator-active-border-color: null,
    $indicator-active-hover-dot-color: null
) {
    $selector: #{config.element-prefix() + '-' + 'carousel'};
    $carousel-schema: ();

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

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

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

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

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

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

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

    @if not($button-arrow-color) and $button-background {
        $button-arrow-color: hsla(from (adaptive-contrast(var(--button-background)) h s l / 0.85));
    }

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

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

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

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

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

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

    @if $variant == 'indigo' {
        @if not($indicator-dot-color) and $indicator-background {
            $indicator-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
        }

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

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

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

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

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

    @if $variant == 'material' {
        @if not($button-focus-border-color) and $button-focus-arrow-color {
            $button-focus-border-color: var(--button-focus-arrow-color);
        }
    }

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

    @if $variant == 'indigo' {
        @if not($button-focus-border-color) and $indicator-active-dot-color {
            $button-focus-border-color: var(--indicator-active-dot-color);
        }

        @if not($indicator-focus-color) and $indicator-active-hover-dot-color {
            $indicator-focus-color: hsl(from var(--indicator-active-hover-dot-color) h s l / 0.5);
        }
    } @else {
        @if not($indicator-focus-color) and not($indicator-background) and $button-background {
            $indicator-focus-color: var(--button-background);
        }

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

    @return extend(
        $theme,
        (
            selector: $selector,

            slide-background: $slide-background,

            border-radius: $border-radius,
            button-elevation: $button-shadow,

            button-background: $button-background,
            button-disabled-background: $button-disabled-background,
            button-hover-background: $button-hover-background,
            button-arrow-color: $button-arrow-color,
            button-hover-arrow-color: $button-hover-arrow-color,
            button-focus-arrow-color: $button-focus-arrow-color,
            button-disabled-arrow-color: $button-disabled-arrow-color,
            button-border-color: $button-border-color,
            button-hover-border-color: $button-hover-border-color,
            button-focus-border-color: $button-focus-border-color,
            button-disabled-border-color: $button-disabled-border-color,

            indicator-background: $indicator-background,
            label-indicator-background: $label-indicator-background,
            indicator-dot-color: $indicator-dot-color,
            indicator-hover-dot-color: $indicator-hover-dot-color,
            indicator-focus-color: $indicator-focus-color,
            indicator-border-color: $indicator-border-color,
            indicator-active-dot-color: $indicator-active-dot-color,
            indicator-active-border-color: $indicator-active-border-color,
            indicator-active-hover-dot-color: $indicator-active-hover-dot-color,
        )
    );
}