// 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 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 {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected.
/// @param {List} $marker-brushes [null] - Defines the palette from which automatically assigned marker brushes are selected.
/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
/// @param {List} $marker-outlines [null] - Defines the palette from which automatically assigned marker outlines are selected.
/// @param {Color} $plot-area-background [null] - Sets the brush used as the background for the current Chart object's plot area.
/// @param {String} $title-horizontal-alignment [null] - The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right';
/// @param {String} $subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right';
/// @param {List} $axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the both axes.
/// @param {Color} $axis-label-text-color [null] - Sets the color of labels on both axes.
/// @param {String} $axis-label-text-style [null] - Sets the CSS font property for labels on both axes.
/// @param {String} $axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
/// @param {Color} $axis-major-stroke [null] - Sets the color to apply to major gridlines along both axes.
/// @param {Number} $axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines on both axes.
/// @param {Color} $axis-minor-stroke [null] - Sets the color to apply to minor gridlines along  both axes.
/// @param {Number} $axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along both axes.
/// @param {Color} $axis-strip [null] - Sets the color to apply to stripes along both axes.
/// @param {Color} $axis-stroke [null] - Sets the color to apply to both axes.
/// @param {Number} $axis-stroke-thickness [null] - Sets the thickness to apply to both axes.
/// @param {Number} $axis-tick-length [null] - Sets the length of tickmarks along both axes.
/// @param {Color} $axis-tick-stroke [null] - Sets the color to apply to tickmarks along both axes.
/// @param {Number} $axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along both axes.
/// @param {String} $axis-title-alignment [null] - Sets the horizontal alignment of both axes.
/// @param {List} $axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on both axes.
/// @param {Color} $axis-title-text-color [null] - Sets the color of the title on the X-axis.
/// @param {String} $axis-title-text-style [null] - Sets the CSS font property for the title on both axes.
/// @requires {function} extend
///
/// @example scss
///   $my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-chart-theme);
@function data-chart-theme(
    $schema: $light-material-schema,
    $target: 'angular',

    $margin: null,
    $title-text-color: null,
    $title-margin: null,
    $subtitle-text-color: null,
    $subtitle-margin: null,
    $brushes: null,
    $outlines: null,
    $marker-brushes: null,
    $marker-outlines: null,
    $plot-area-background: null,
    $title-horizontal-alignment: null,
    $subtitle-horizontal-alignment: null,
    $axis-label-margin: null,
    $axis-label-text-color: null,
    $axis-label-text-style: null,
    $axis-label-vertical-alignment: null,
    $axis-major-stroke-thickness: null,
    $axis-minor-stroke-thickness: null,
    $axis-stroke: null,
    $axis-stroke-thickness: null,
    $axis-tick-length: null,
    $axis-tick-stroke-thickness: null,
    $axis-title-alignment: null,
    $axis-title-margin: null,
    $axis-title-text-style: null,
    $axis-title-text-color: null,
    $axis-major-stroke: null,
    $axis-minor-stroke: null,
    $axis-tick-stroke: null,
    $axis-strip: null
) {
    $name: 'data-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);
    $margin-default: map.get($theme, 'margin');
    $title-margin-default: map.get($theme, 'title-margin');
    $subtitle-margin-default: map.get($theme, 'subtitle-margin');

    @if not($margin) {
        $margin: $margin-default;
    } @else {
        $margin: expand-shorthand(($margin));
    }

    @if not($title-margin) {
        $title-margin: $title-margin-default;
    } @else {
        $title-margin: map-keys-prefix(expand-shorthand(($title-margin)), 'title');
    }

    @if not($subtitle-margin) {
        $subtitle-margin: $subtitle-margin-default;
    } @else {
        $subtitle-margin: map-keys-prefix(expand-shorthand(($subtitle-margin)), 'subtitle');
    }

    @return extend(
        $theme,
        $margin,
        $title-margin,
        $subtitle-margin,
        (
            name: $name,
            selector: $selector,
            title-text-color: $title-text-color,
            subtitle-text-color: $subtitle-text-color,
            brushes: $brushes,
            outlines: $outlines,
            marker-brushes: $marker-brushes,
            marker-outlines: $marker-outlines,
            plot-area-background: $plot-area-background,
            title-horizontal-alignment: $title-horizontal-alignment,
            subtitle-horizontal-alignment: $subtitle-horizontal-alignment,
            axis-label-margin: $axis-label-margin,
            axis-label-text-color: $axis-label-text-color,
            axis-label-text-style: $axis-label-text-style,
            axis-label-vertical-alignment: $axis-label-vertical-alignment,
            axis-major-stroke-thickness: $axis-major-stroke-thickness,
            axis-minor-stroke-thickness: $axis-minor-stroke-thickness,
            axis-stroke: $axis-stroke,
            axis-stroke-thickness: $axis-stroke-thickness,
            axis-tick-length: $axis-tick-length,
            axis-tick-stroke-thickness: $axis-tick-stroke-thickness,
            axis-title-alignment: $axis-title-alignment,
            axis-title-margin: $axis-title-margin,
            axis-title-text-style: $axis-title-text-style,
            axis-title-text-color: $axis-title-text-color,
            axis-major-stroke: $axis-major-stroke,
            axis-minor-stroke: $axis-minor-stroke,
            axis-tick-stroke: $axis-tick-stroke,
            axis-strip: $axis-strip,
        )
    );
}

/// Adds typography styles for the data-chart component.
/// Uses the 'h6' and 'subtitle-1'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $type-scale - A typographic scale as produced by type-scale.
/// @param {Map} $categories [(title: 'h6', subtitle: 'subtitle-1')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} type-style
@mixin data-chart-typography($type-scale, $categories: (title: 'h6', subtitle: 'subtitle-1'), $target: 'angular') {
    $name: 'data-chart';
    $selector: #{element-prefix()}-#{$name};
    $title: map.get($categories, 'title');
    $subtitle: map.get($categories, 'subtitle');
    $title-styles: type-scale-category($type-scale, $title);
    $subtitle-styles: type-scale-category($type-scale, $subtitle);

    #{$selector} {
        @include font-var('title-text-style', $title-styles, $name);
        @include font-var('subtitle-text-style', $subtitle-styles, $name);
    }
}