@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} $slide-background [null] - The slide background color.
/// @param {Color} $button-background [null] - The previous/next buttons idle background color.
/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.
/// @param {Color} $button-disabled-background [null] - The previous/next buttons disabled background color.
/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color.
/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color.
/// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.
/// @param {Color} $button-border-color [null] - The previous/next buttons idle border color.
/// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color.
/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus.
/// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color.
/// @param {Color} $indicator-background [null] - The indicators container background color.
/// @param {Color} $label-indicator-background [null] - The label indicator container background color.
/// @param {Color} $indicator-dot-color [null] - The idle indicator dot color.
/// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color.
/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus.
/// @param {Color} $indicator-border-color [null] - The idle indicator border color.
/// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color.
/// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
/// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover.
/// @param {box-shadow} $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
) {
    $name: 'igx-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: hsl(from var(--button-background) h s calc(l * 0.9));
        }

        @if not($button-border-color) and $button-background {
            $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9));
        }

        @if not($button-hover-border-color) and $button-border-color {
            $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9));
        }

        @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: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / 0.4);
    }

    @if not($indicator-dot-color) and $indicator-background {
        $indicator-dot-color: hsla(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: hsla(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);
    }

    @if not($indicator-active-dot-color) and $indicator-background {
        $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9));
    }

    @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color {
        $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1));
    }

    @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: hsla(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: hsla(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,
        (
            name: $name,

            slide-background: $slide-background,

            border-radius: $border-radius,
            button-shadow: $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,
        )
    );
}