// stylelint-disable max-line-length
@use 'sass:map';
@use '../mixins' as *;
@use '../functions' as *;
@use '../schemas/charts' as *;
@use '../../utils' as *;
@use '../../typography/mixins' as *;
@use '../../typography/functions' as *;

////
/// @package theming
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
/// @param {Color} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.
/// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.
/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
/// @param {Color} $font-brush [null] - Sets the brush to use for the label font.
/// @param {Color} $minor-tick-brush [null] - Sets the brush to use for the minor tickmarks.
/// @param {Number} $minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks.
/// @param {List} $range-brushes [null] - Sets a collection of brushes to be used as the palette for bullet graph ranges.
/// @param {List} $range-outlines [null] - Sets a collection of brushes to be used as the palette for bullet graph outlines.
/// @param {Color} $scale-background-brush [null] - Sets the background brush for the scale.
/// @param {Color} $scale-background-outline [null] - Sets the background outline for the scale.
/// @param {Number} $scale-background-thickness [null] - Sets the background outline thickness for the scale.
/// @param {Number} $target-value-breadth [null] - Sets the breadth of the target value element.
/// @param {Color} $target-value-brush [null] - Sets the brush to use when rendering the fill of the comparative marker.
/// @param {Color} $target-value-outline [null] - Sets the brush to use when rendering the outline of the target value.
/// @param {Number} $target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar.
/// @param {Color} $tick-brush [null] - Sets the brush to use for the major tickmarks.
/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
/// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.
/// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.
/// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
/// @requires $light-material-schema
/// @requires extend
///
/// @example scss
///   $my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-chart-theme);
@function bullet-graph-theme(
    $schema: $light-material-schema,
    $target: 'angular',

    $backing-brush: null,
    $backing-outline: null,
    $backing-stroke-thickness: null,
    $font-brush: null,
    $minor-tick-brush: null,
    $minor-tick-thickness: null,
    $range-brushes: null,
    $range-outlines: null,
    $scale-background-brush: null,
    $scale-background-outline: null,
    $scale-background-thickness: null,
    $target-value-breadth: null,
    $target-value-brush: null,
    $target-value-outline: null,
    $target-value-thickness: null,
    $tick-brush: null,
    $tick-stroke-thickness: null,
    $value-brush: null,
    $value-outline: null,
    $value-stroke-thickness: null
) {
    $name: 'bullet-graph';
    $selector: map.get(
        (
            'angular': 'igx-bullet-graph',
            'webc': 'igc-bullet-graph',
            'blazor': 'igb-bullet-graph',
        ),
        $target
    );
    $chart-schema: ();

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

    $theme: digest-schema($chart-schema);

    @return extend(
        $theme,
        (
            name: $name,
            selector: $selector,
            backing-brush: $backing-brush,
            backing-outline: $backing-outline,
            backing-stroke-thickness: $backing-stroke-thickness,
            font-brush: $font-brush,
            minor-tick-brush: $minor-tick-brush,
            minor-tick-thickness: $minor-tick-thickness,
            range-brushes: $range-brushes,
            range-outlines: $range-outlines,
            scale-background-brush: $scale-background-brush,
            scale-background-outline: $scale-background-outline,
            scale-background-thickness: $scale-background-thickness,
            target-value-breadth: $target-value-breadth,
            target-value-brush: $target-value-brush,
            target-value-outline: $target-value-outline,
            target-value-thickness: $target-value-thickness,
            tick-brush: $tick-brush,
            tick-stroke-thickness: $tick-stroke-thickness,
            value-brush: $value-brush,
            value-outline: $value-outline,
            value-stroke-thickness: $value-stroke-thickness,
        )
    );
}

/// Adds typography styles for the graph component.
/// @access private
/// @group typography
/// @requires {mixin} type-style
@mixin graph-typography($target: 'angular') {
    $selector: map.get(
        (
            'angular': 'igx-bullet-graph',
            'webc': 'igc-bullet-graph',
            'blazor': 'igb-bullet-graph',
        ),
        $target
    );

    #{$selector} {
        --bullet-graph-font: var(--ig-font-family, inherit);
    }
}