@use 'sass:map';
@use 'igniteui-theming/sass/themes' as *;
@use '../../core/styles/themes/scoping' as *;

/// Emits the derived token overrides for the sub-components rendered inside
/// `ig*-grid`, computed from the grid's own background, foreground and
/// accent color tokens. Emitted once per theme into the `ig.derived` cascade layer.
/// @access private
/// @param {Map} $schema - The active theme schema used to resolve the sub-component themes.
/// @param {string} $theme - The active theme name - material, indigo, bootstrap, or fluent.
/// @requires {mixin} scope
/// @requires {mixin} tokens
/// @requires {function} digest-schema
/// @output Scoped CSS custom properties for the sub-components.
@mixin derived-themes($schema, $theme) {
    // .igx-grid is applied via host binding by igx-grid, igx-tree-grid, igx-hierarchical-grid
    // and igx-pivot-grid alike, regardless of the tag name a consumer (e.g. igniteui-angular-elements,
    // which renders these as igc-*) renders them under. igx-grid-lite is a separate, external
    // package we don't control the host class of, so it's kept as an explicit tag fallback.
    $selectors: '.igx-grid, igx-grid-lite, igc-grid-lite';

    @include scope(derived, $selectors, $schema) using ($schema) {
        --_grid-background: var(--background, var(--ig-grid-background));
        --_grid-foreground: var(--foreground, var(--ig-grid-foreground));
        --_grid-accent-color: var(--accent-color, var(--ig-grid-accent-color));

        @include tokens(
            action-strip-theme(
                $schema: $schema,
                $background: color-mix(in srgb, var(--_grid-accent-color) 12%, transparent),
                $actions-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
                $icon-color: var(--_grid-accent-color),
            )
        );

        @include tokens(
            badge-theme(
                $schema: $schema,
                $background-color: var(--_grid-accent-color),
            )
        );

        @include tokens(
            banner-theme(
                $schema: $schema,
                $banner-background: var(--_grid-background),
                $banner-message-color: var(--_grid-foreground),
                $banner-illustration-color: var(--_grid-foreground),
                $banner-border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background))
            )
        );

        @include tokens(
            calendar-theme(
                $header-background: var(--_grid-accent-color),
                $content-background: var(--_grid-background),
                $content-foreground: var(--_grid-foreground),
            )
        );

        @include tokens(
            checkbox-theme(
                $schema: $schema,
                $empty-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
                $empty-fill-color: var(--_grid-background),
                $tick-color-hover: color-mix(in srgb, var(--_grid-foreground) 40%, var(--_grid-background)),
                $fill-color: var(--_grid-accent-color),
                $label-color: var(--_grid-foreground),
                $disabled-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
            )
        );

        igx-grid-header-row {
            @include tokens(
                checkbox-theme(
                    $schema: $schema,
                    $empty-color: var(--ig-grid-header-text-color),
                    $empty-fill-color: var(--ig-grid-header-background),
                    $tick-color-hover: color-mix(in srgb, var(--ig-grid-header-text-color) 40%, var(--ig-grid-header-background)),
                    $fill-color: var(--_grid-accent-color),
                    $label-color: var(--ig-grid-header-text-color),
                    $disabled-color: color-mix(in srgb, var(--ig-grid-header-text-color) 50%, var(--ig-grid-header-background)),
                )
            );
        }

        @include tokens(
            chip-theme(
                $schema: $schema,
                $background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $text-color: var(--_grid-foreground),
                $ghost-background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $ghost-text-color: var(--_grid-foreground),
                $disabled-background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $disabled-text-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
                $disabled-border-color: color-mix(in srgb, var(--_grid-foreground) 24%, var(--_grid-background)),
            )
        );

        @include tokens(
            contained-button-theme(
                $schema: $schema,
                $background: var(--_grid-accent-color),
                $disabled-background: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
                $disabled-foreground: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
            )
        );

        @include tokens(
            drop-down-theme(
                $schema: $schema,
                $background-color: var(--_grid-background),
                $item-text-color: var(--_grid-foreground),
                $border-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $hover-item-background: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background)),
                $focused-item-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
                $selected-item-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
                $selected-hover-item-background: color-mix(in srgb, var(--_grid-accent-color) 16%, var(--_grid-background)),
                $selected-focus-item-background: color-mix(in srgb, var(--_grid-accent-color) 24%, var(--_grid-background)),
            )
        );

        @include tokens(
            excel-filtering-theme(
                $background: var(--_grid-background),
                $foreground: var(--_grid-foreground),
                $accent-color: var(--_grid-accent-color),
            )
        );

        @include tokens(
            flat-button-theme(
                $schema: $schema,
                $foreground: var(--_grid-accent-color),
                $disabled-background: transparent,
                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
            )
        );

        @include tokens(
            flat-icon-button-theme(
                $schema: $schema,
                $foreground: var(--_grid-accent-color),
                $disabled-background: transparent,
                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
            )
        );

        @include tokens(
            grid-summary-theme(
                $schema: $schema,
                $background-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
                $pinned-border-color: color-mix(in srgb, var(--_grid-foreground) 30%, var(--_grid-background)),
                $label-color: var(--_grid-accent-color),
                $result-color: var(--_grid-foreground)
            )
        );

        @include tokens(
            grid-toolbar-theme(
                $schema: $schema,
                $background: var(--_grid-background),
                $foreground: var(--_grid-foreground),
                $title-text-color: var(--_grid-foreground),
                $accent-color: var(--_grid-accent-color)
            )
        );

        @include tokens(
            highlight-theme(
                $schema: $schema,
                $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
                $active-background: var(--_grid-accent-color)
            )
        );

        @if $theme == 'material' {
            @include tokens(
                input-group-theme(
                    $schema: $schema,
                    $box-background: var(--_grid-background),
                    $search-background: color-mix(in srgb, var(--_grid-foreground) 6%, var(--_grid-background)),
                    $idle-bottom-line-color: var(--_grid-accent-color),
                    $idle-secondary-color: var(--_grid-foreground),
                    $focused-secondary-color: var(--_grid-accent-color),
                    $border-color: var(--_grid-accent-color),
                    $idle-text-color: var(--_grid-foreground),
                    $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
                )
            );
        } @else if $theme == 'indigo' {
            @include tokens(
                input-group-theme(
                    $schema: $schema,
                    $idle-bottom-line-color: var(--_grid-accent-color),
                    $idle-text-color: var(--_grid-foreground),
                    $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
                )
            );
        } @else {
            @include tokens(
                input-group-theme(
                    $schema: $schema,
                    $border-color: var(--_grid-accent-color),
                    $idle-text-color: var(--_grid-foreground),
                    $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
                    $input-prefix-background: var(--_grid-accent-color),
                    $border-disabled-background: transparent,
                    $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, transparent),
                )
            );
        }

        @include tokens(
            outlined-button-theme(
                $schema: $schema,
                $foreground: var(--_grid-accent-color),
                $disabled-background: transparent,
                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
            )
        );

        @include tokens(
            outlined-icon-button-theme(
                $schema: $schema,
                $foreground: var(--_grid-accent-color),
                $disabled-background: transparent,
                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background))
            )
        );

        @include tokens(
            paginator-theme(
                $schema: $schema,
                $background: var(--_grid-background),
                $foreground: var(--_grid-foreground),
                $border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background)),
                $accent-color: var(--_grid-accent-color)
            )
        );

        @include tokens(
            progress-circular-theme(
                $schema: $schema,
                $track-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $fill-color-default: var(--_grid-accent-color),
                $text-color: var(--_grid-foreground)
            )
        );

        @include tokens(
            progress-linear-theme(
                $schema: $schema,
                $track-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
                $fill-color-default: var(--_grid-accent-color),
                $text-color: var(--_grid-foreground)
            ),
        );

        @if $theme == 'bootstrap' {
            @include tokens(
                query-builder-theme(
                    $schema: $schema,
                    $background: var(--_grid-background),
                    $foreground: var(--_grid-foreground),
                    $accent-color: var(--_grid-accent-color),
                    $header-border: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
                )
            );
        } @else {
            @include tokens(
                query-builder-theme(
                    $schema: $schema,
                    $background: var(--_grid-background),
                    $foreground: var(--_grid-foreground),
                    $accent-color: var(--_grid-accent-color),
                    $header-foreground: var(--_grid-foreground),
                )
            );
        }

        $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
        $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
        $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
        $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');

        --_scrollbar-thumb-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background));
        --_scrollbar-track-border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background));

        @include tokens(
            scrollbar-theme(
                $schema: $schema,
                $sb-track-bg-color: var(--_grid-background, var(--content-background), $scrollbar-bg-color),
                $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
                $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
            ),
            $mode: 'scoped'
        );

        @if $theme == 'indigo' {
            @include tokens(
                select-theme(
                    $schema: $schema,
                    $toggle-button-foreground: var(--_grid-accent-color),
                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
                )
            );
        } @else {
            @include tokens(
                select-theme(
                    $schema: $schema,
                    $toggle-button-background: var(--_grid-accent-color),
                )
            );
        }

        @include tokens(
            tooltip-theme(
                $schema: $schema,
                $background: hsl(from var(--_grid-foreground) h s l / 80%)
            ),
        );

        @include tokens(
            tree-theme(
                $schema: $schema,
                $background: var(--_grid-background)
            ),
        );

        @include tokens(
            watermark-theme(
                $schema: $schema,
                $base-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
                $color: var(--_grid-foreground),
                $border-color: color-mix(in srgb, var(--_grid-accent-color) 16%, var(--_grid-background))
            )
        );
    }
}