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

////
/// @package theming
/// @group themes
/// @access private
/// @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 {List} $brushes [null] - Defines the palette from which automatically assigned series colors are nelected.
/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
/// @param {String} $outer-label-alignment [null] - Sets which side of the chart the outer labels should appear.
/// @param {Color} $outer-label-text-color [null] - Sets the Color used for the outer labels.
/// @param {Color} $outer-label-visibility [null] - Sets whether the outer labels are visible.
/// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices.
/// @param {Color} $text-color - [null] Sets the Color used for the inner labels.
///
/// @requires {function} extend
///
/// @example scss
///   $my-chart-theme: funnel-chart-theme($brushes: (orange, blue, pink));
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-chart-theme);
@function funnel-chart-theme(
    $schema: $light-material-schema,
    $target: 'angular',

    $brushes: null,
    $outlines: null,
    $outer-label-alignment: null,
    $outer-label-text-color: null,
    $outer-label-visibility: null,
    $outline-thickness: null,
    $text-color: null
) {
    $name: 'funnel-chart';
    $selector: #{element-prefix()}-#{$name};
    $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,
            brushes: $brushes,
            outlines: $outlines,
            outer-label-alignment: $outer-label-alignment,
            outer-label-text-color: $outer-label-text-color,
            outer-label-visibility: $outer-label-visibility,
            outline-thickness: $outline-thickness,
            text-color: $text-color,
        )
    );
}

@mixin funnel-chart-typography(
    $type-scale,
    $categories: (outer-label-text-style: 'h1', text-style: 'subtitle-1'),
    $target: 'angular'
) {
    $name: 'funnel-chart';
    $selector: #{element-prefix()}-#{$name};
    $outer-label-text-style: map.get($categories, 'outer-label-text-style');
    $text-style: map.get($categories, 'text-style');
    $outer-label: type-scale-category($type-scale, $outer-label-text-style);
    $text: type-scale-category($type-scale, $text-style);

    #{$selector} {
        @include font-var('outer-label-text-style', $outer-label, $name);
        @include font-var('text-style', $text, $name);
    }
}