@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/desig9stein" target="_blank">Marin Popov</a>
////

/// Button Group Theme
///
/// PRIMARY TOKENS:
/// - `$item-background` — The base item background.
/// - `$item-selected-background` — The selected item background.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {List} $shadow [null] - The shadow to be applied for the button group.
/// @param {Color} $item-text-color [null]- The text color for button group items. Auto-derived from item-background.
/// @param {color} $item-icon-color [null]- The icon color for button group items. Auto-derived from item-text-color.
/// @param {Color} $item-background [null] - The background color for button group items. PRIMARY - derives all state colors.
/// @param {Color} $item-border-color [null] - The border color between button group items. Auto-derived from item-background.
///
/// @param {Color} $item-hover-text-color [null] - The hover text color for button group items. Auto-derived from item-hover-background.
/// @param {Color} $item-hover-icon-color [null] - The hover icon color for button group items. Auto-derived from item-hover-text-color.
/// @param {Color} $item-hover-background [null] - The hover background color for button group items. Auto-derived from item-background.
/// @param {Color} $item-hover-border-color [null] - The hover border color between button group items. Auto-derived from item-border-color.
///
/// @param {Color} $item-focused-text-color [null] - The focused text color for button group items. Auto-derived from item-focused-background.
/// @param {Color} $item-focused-background [null] - The focused background color for button group items. Auto-derived from item-hover-background.
/// @param {Color} $item-focused-border-color [null] - The focused border color for an item from the button group. Auto-derived from item-border-color.
/// @param {Color} $item-focused-hover-text-color [null] - The focused & hover text color for button group items. Auto-derived from item-focused-text-color.
/// @param {Color} $item-focused-hover-border-color [null] - The focused & hover border color for an item from the button group. Auto-derived from item-focused-border-color.
/// @param {Color} $item-focused-hover-background [null] - The focused & hover background color for button group items. Auto-derived from item-focused-background.
/// @param {Color} $item-active-background [null] - The active background color for button group items. Auto-derived from item-hover-background.
/// @param {Color} $item-active-border-color [null] - The active border color for button group items. Auto-derived from item-hover-border-color.
/// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items. Auto-derived from item-background or selected-shadow-color.
/// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items. Auto-derived from idle-shadow-color.
///
/// @param {Color} $disabled-text-color [null]- The text/icon color for a disabled item in the button group. Auto-derived from disabled-background-color.
/// @param {Color} $disabled-background-color [null] - The background color for a disabled item in the button group. Auto-derived from item-background.
/// @param {Color} $item-disabled-border [null] - The border color for a disabled item in the button group. Auto-derived from item-border-color.
///
/// @param {Color} $item-selected-text-color [null]- The text color for a selected item in the button group. Auto-derived from item-selected-background.
/// @param {Color} $item-selected-icon-color [null]- The icon color for a selected item in the button group. Auto-derived from item-selected-text-color.
/// @param {Color} $item-selected-background [null] - The background color for a selected item in the button group. PRIMARY for selected state. Auto-derived from item-background.
/// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group. Auto-derived from item-border-color.
///
/// @param {Color} $item-selected-hover-text-color [null] - The text color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-background.
/// @param {Color} $item-selected-hover-icon-color [null] - The icon color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-text-color.
/// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover state in the button group. Auto-derived from item-selected-background.
/// @param {Color} $item-selected-hover-border-color [null] - The border color for a selected item in hover state in the button group. Auto-derived from item-border-color.
/// @param {Color} $item-selected-focus-background [null] - The background color for a selected item in focused state in the button group. Auto-derived from item-selected-background.
/// @param {Color} $item-selected-focus-hover-background [null] - The background color for a selected item in focused & hover state in the button group. Auto-derived from item-selected-hover-background.
/// @param {Color} $item-selected-active-background [null] - The active background color for a selected item in the button group. Auto-derived from item-selected-hover-background.
/// @param {Color} $item-selected-active-border-color [null] - The active border color for a selected item in the button group. Auto-derived from item-selected-hover-border-color.
///
/// @param {Color} $disabled-selected-text-color [null] - The disabled text color for a selected item in the button group. Auto-derived from disabled-text-color.
/// @param {Color} $disabled-selected-icon-color [null] - The disabled icon color for a selected item in the button group. Auto-derived from disabled-selected-text-color.
/// @param {Color} $disabled-selected-background [null] - The disabled background color for a selected item in the button group. Auto-derived from item-selected-background.
/// @param {Color} $disabled-selected-border-color [null] - The disabled border color for a selected item from the button group. Auto-derived from item-border-color.
///
/// @param {List} $border-radius [null] - The border radius used for button-group component.
///
/// @requires $light-material-schema
///
/// @example scss - Change the background, text, and border colors
///   $my-button-group-theme: button-group-theme(
///     $item-text-color: white,
///     $item-background: rgba(0, 0, 0, .8),
///     $item-border-color: #dadada
///   );
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-button-group-theme);
@function button-group-theme(
    $schema: $light-material-schema,
    $shadow: null,

    $item-text-color: null,
    $item-icon-color: $item-text-color,
    $item-background: null,
    $item-border-color: null,

    $item-hover-text-color: null,
    $item-hover-icon-color: $item-hover-text-color,
    $item-hover-background: null,
    $item-hover-border-color: null,

    $item-focused-text-color: null,
    $item-focused-border-color: null,
    $item-focused-hover-text-color: null,
    $item-focused-hover-border-color: null,
    $item-focused-background: null,
    $item-focused-hover-background: null,
    $item-active-background: null,
    $item-active-border-color: null,
    $idle-shadow-color: null,
    $selected-shadow-color: null,
    $border-radius: null,

    $disabled-text-color: null,
    $disabled-background-color: null,
    $item-disabled-border: null,

    $item-selected-text-color: null,
    $item-selected-icon-color: $item-selected-text-color,
    $item-selected-background: null,
    $item-selected-border-color: null,

    $item-selected-hover-text-color: null,
    $item-selected-hover-icon-color: $item-selected-hover-text-color,
    $item-selected-hover-background: null,
    $item-selected-hover-border-color: null,
    $item-selected-focus-background: null,
    $item-selected-focus-hover-background: null,
    $item-selected-active-background: null,
    $item-selected-active-border-color: null,

    $disabled-selected-text-color: null,
    $disabled-selected-icon-color: $disabled-selected-text-color,
    $disabled-selected-background: null,
    $disabled-selected-border-color: null
) {
    $selector: (#{config.element-prefix() + '-' + 'buttongroup'}, #{config.element-prefix() + '-' + 'button-group'});
    $button-group-schema: ();

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

    $theme: digest-schema($button-group-schema);
    $border: rem(1px, 16px) solid map.get($theme, 'item-selected-border-color');

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

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

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

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

    @if not($item-selected-background) and $item-background {
        $item-selected-background: dynamic-shade(var(--item-background), $offset: 10);
    }

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

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

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

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

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

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

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

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

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

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

    @if not($disabled-selected-background) and $item-selected-background {
        $disabled-selected-background: hsl(from var(--item-selected-background) h s l / 0.3);
    }

    // border colors
    @if not($item-border-color) and $item-background {
        $item-border-color: dynamic-shade(var(--item-background), $offset: 7);
    }

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

    @if not($item-focused-border-color) and $item-border-color {
        $item-focused-border-color: var(--item-border-color);
    }

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

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

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

    @if not($item-disabled-border) and $item-border-color {
        $item-disabled-border: var(--item-border-color);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @if not($idle-shadow-color) and $item-background {
        $idle-shadow-color: hsl(from var(--item-background) h s l / 0.5);
    }

    @if not($idle-shadow-color) and $selected-shadow-color {
        $idle-shadow-color: var(--selected-shadow-color);
    }

    @if not($selected-shadow-color) and $idle-shadow-color {
        $selected-shadow-color: var(--idle-shadow-color);
    }

    @if map.get($button-group-schema, 'elevation') > 0 {
        $border: none;
    }

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

    @return extend(
        $theme,
        (
            selector: $selector,
            item-text-color: $item-text-color,
            item-icon-color: $item-icon-color,
            item-background: $item-background,
            item-border-color: $item-border-color,
            item-focused-text-color: $item-focused-text-color,
            item-focused-hover-text-color: $item-focused-hover-text-color,
            item-focused-background: $item-focused-background,
            item-focused-border-color: $item-focused-border-color,
            item-focused-hover-border-color: $item-focused-hover-border-color,
            item-focused-hover-background: $item-focused-hover-background,
            item-active-background: $item-active-background,
            item-active-border-color: $item-active-border-color,
            border-radius: $border-radius,
            item-hover-text-color: $item-hover-text-color,
            item-hover-icon-color: $item-hover-icon-color,
            item-hover-background: $item-hover-background,
            item-hover-border-color: $item-hover-border-color,
            disabled-text-color: $disabled-text-color,
            disabled-background-color: $disabled-background-color,
            item-disabled-border: $item-disabled-border,
            item-selected-text-color: $item-selected-text-color,
            item-selected-icon-color: $item-selected-icon-color,
            item-selected-background: $item-selected-background,
            item-selected-border-color: $item-selected-border-color,
            item-selected-hover-text-color: $item-selected-hover-text-color,
            item-selected-hover-icon-color: $item-selected-hover-icon-color,
            item-selected-hover-background: $item-selected-hover-background,
            item-selected-hover-border-color: $item-selected-hover-border-color,
            item-selected-focus-background: $item-selected-focus-background,
            item-selected-focus-hover-background: $item-selected-focus-hover-background,
            item-selected-active-background: $item-selected-active-background,
            item-selected-active-border-color: $item-selected-active-border-color,
            disabled-selected-text-color: $disabled-selected-text-color,
            disabled-selected-icon-color: $disabled-selected-icon-color,
            disabled-selected-background: $disabled-selected-background,
            disabled-selected-border-color: $disabled-selected-border-color,
            border: $border,
            elevation: $shadow,
            idle-shadow-color: $idle-shadow-color,
            selected-shadow-color: $selected-shadow-color,
        )
    );
}