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

/// Splitter Theme
///
/// PRIMARY TOKENS:
/// - `$bar-color` — The bar background color.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $bar-color [null] - The background color of the bar. PRIMARY - derives handle, expander, focus colors.
/// @param {Color} $handle-color [null] - The color for the bar drag handle. Auto-derived from bar-color.
/// @param {Color} $expander-color [null] - The color for the arrow expander's. Auto-derived from bar-color.
/// @param {List} $border-radius [null] - the border radios of the splitter bar drag handle
/// @param {Color} $focus-color [null] - The color used for focused splitter bar. Auto-derived from bar-color (variant-dependent).
/// @param {Color} $bar-color-active [null] - The background color of the bar when pressed.
/// @param {Color} $handle-color-active [null] - The color for the bar drag handle when pressed.
/// @param {Color} $expander-color-active [null] - The color for the arrow expander's when pressed.
/// @param {Number} $size [null] - The size of the splitter, its width for vertical and height for horizontal splitter.
/// @requires $light-material-schema
/// @example scss - Set a custom expander color
///   $my-splitter-theme: splitter-theme($expander-color: red);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-splitter-them);
@function splitter-theme(
    $schema: $light-material-schema,

    $bar-color: null,
    $handle-color: null,
    $expander-color: null,
    $border-radius: null,
    $focus-color: null,
    $bar-color-active: null,
    $handle-color-active: null,
    $expander-color-active: null,
    $size: null
) {
    $selector: #{config.element-prefix() + '-' + 'splitter'};
    $splitter-schema: ();

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

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

    @if not($handle-color) and $bar-color {
        $handle-color: adaptive-contrast(var(--bar-color));
    }

    @if not($expander-color) and $bar-color {
        $expander-color: adaptive-contrast(var(--bar-color));
    }

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

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

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

    @return extend(
        $theme,
        (
            selector: $selector,
            bar-color: $bar-color,
            handle-color: $handle-color,
            expander-color: $expander-color,
            border-radius: $border-radius,
            focus-color: $focus-color,
            bar-color-active: $bar-color-active,
            handle-color-active: $handle-color-active,
            expander-color-active: $expander-color-active,
            size: $size,
        )
    );
}