// 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/SisIvanova" target="_blank">Silvia Ivanova</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 {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
/// @param {List} $brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
/// @param {List} $marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
/// @param {List} $negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
/// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
/// @param {List} $marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected.
/// @param {List} $negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
/// @param {String} $title-alignment [null] - The horizontal alignment to use for the title.
/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
/// @param {String} $title-text-style [null] - Sets the CSS font property of the chart title.
/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
/// @param {String} $subtitle-alignment [null] - The horizontal alignment to use for the subtitle.
/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
/// @param {String} $subtitle-text-style [null] - Sets the CSS font property of the chart subtitle.
/// @param {Number} $thickness [null] - Sets the thickness for all series in a chart.
/// @param {List} $trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart.
/// @param {Number} $trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
/// @param {List} $x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis.
/// @param {Color} $x-axis-label-text-color [null] - Sets the color of labels on the X-axis.
/// @param {String} $x-axis-label-text-style [null] - Sets the CSS font property for labels on X-axis.
/// @param {String} $x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
/// @param {Color} $x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
/// @param {Number} $x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
/// @param {Color} $x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
/// @param {Number} $x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
/// @param {Color} $x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
/// @param {Color} $x-axis-stroke [null] - Sets the color to apply to the X-axis line.
/// @param {Number} $x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
/// @param {Number} $x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis.
/// @param {Color} $x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis.
/// @param {Number} $x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis.
/// @param {String} $x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title.
/// @param {List} $x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis.
/// @param {Color} $x-axis-title-text-color [null] - Sets the color of the title on the X-axis.
/// @param {String} $x-axis-title-text-style [null] - Sets the CSS font property for the title on the X-axis.
/// @param {List} $y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis.
/// @param {Color} $y-axis-label-text-color [null] - Sets the color of labels on the Y-axis.
/// @param {String} $y-axis-label-text-style [null] - Sets the CSS font property for labels on Y-axis.
/// @param {String} $y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels.
/// @param {Color} $y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis.
/// @param {Number} $y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
/// @param {Color} $y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
/// @param {Number} $y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
/// @param {Color} $y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
/// @param {Color} $y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
/// @param {Number} $y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
/// @param {String} $y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title.
/// @param {List} $y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis.
/// @param {Color} $y-axis-title-text-color [null] - Sets the color of a title on the Y-axis.
/// @param {String} $y-axis-title-text-style [null] - Sets the CSS font property for the title on the Y-axis.
/// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
/// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
/// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
/// @requires $light-material-schema
/// @requires extend
///
/// @example scss
///   $custom-chart-theme: category-chart-theme($brushes: (red, green, blue));
///   // Pass the theme to the css-vars mixin
///   @include css-vars($custom-chart-theme);
@function category-chart-theme(
    $schema: $light-material-schema,
    $target: 'angular',

    $margin: null,
    $brushes: null,
    $marker-brushes: null,
    $negative-brushes: null,
    $outlines: null,
    $marker-outlines: null,
    $negative-outlines: null,
    $title-margin: null,
    $title-alignment: null,
    $title-text-color: null,
    $title-text-style: null,
    $subtitle-margin: null,
    $subtitle-alignment: null,
    $subtitle-text-color: null,
    $subtitle-text-style: null,
    $thickness: null,
    $trend-line-brushes: null,
    $trend-line-thickness: null,
    $x-axis-label-margin: null,
    $x-axis-label-text-color: null,
    $x-axis-label-text-style: null,
    $x-axis-label-vertical-alignment: null,
    $x-axis-major-stroke: null,
    $x-axis-major-stroke-thickness: null,
    $x-axis-minor-stroke: null,
    $x-axis-minor-stroke-thickness: null,
    $x-axis-strip: null,
    $x-axis-stroke: null,
    $x-axis-stroke-thickness: null,
    $x-axis-tick-length: null,
    $x-axis-tick-stroke: null,
    $x-axis-tick-stroke-thickness: null,
    $x-axis-title-alignment: null,
    $x-axis-title-margin: null,
    $x-axis-title-text-color: null,
    $x-axis-title-text-style: null,
    $y-axis-label-margin: null,
    $y-axis-label-text-color: null,
    $y-axis-label-text-style: null,
    $y-axis-label-vertical-alignment: null,
    $y-axis-major-stroke: null,
    $y-axis-major-stroke-thickness: null,
    $y-axis-minor-stroke: null,
    $y-axis-minor-stroke-thickness: null,
    $y-axis-strip: null,
    $y-axis-stroke: null,
    $y-axis-stroke-thickness: null,
    $y-axis-title-alignment: null,
    $y-axis-title-margin: null,
    $y-axis-title-text-color: null,
    $y-axis-title-text-style: null,
    $y-axis-tick-length: null,
    $y-axis-tick-stroke: null,
    $y-axis-tick-stroke-thickness: null
) {
    $name: 'category-chart';
    $selector: map.get(
        (
            'angular': 'igx-category-chart',
            'webc': 'igc-category-chart',
            'blazor': 'igb-category-chart',
        ),
        $target
    );
    $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');
    $x-axis-label-margin-default: map.get($theme, 'x-axis-label-margin');
    $x-axis-title-margin-default: map.get($theme, 'x-axis-title-margin');
    $y-axis-label-margin-default: map.get($theme, 'y-axis-label-margin');
    $y-axis-title-margin-default: map.get($theme, 'y-axis-title-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');
    }

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

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

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

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

    @return extend(
        $theme,
        $margin,
        $title-margin,
        $subtitle-margin,
        $x-axis-label-margin,
        $x-axis-title-margin,
        $y-axis-label-margin,
        $y-axis-title-margin,
        (
            name: $name,
            selector: $selector,
            brushes: $brushes,
            marker-brushes: $marker-brushes,
            negative-brushes: $negative-brushes,
            outlines: $outlines,
            marker-outlines: $marker-outlines,
            negative-outlines: $negative-outlines,
            title-alignment: $title-alignment,
            title-text-color: $title-text-color,
            title-text-style: $title-text-style,
            subtitle-alignment: $subtitle-alignment,
            subtitle-text-color: $subtitle-text-color,
            subtitle-text-style: $subtitle-text-style,
            thickness: $thickness,
            trend-line-brushes: $trend-line-brushes,
            trend-line-thickness: $trend-line-thickness,
            x-axis-label-text-color: $x-axis-label-text-color,
            x-axis-label-text-style: $x-axis-label-text-style,
            x-axis-label-vertical-alignment: $x-axis-label-vertical-alignment,
            x-axis-major-stroke: $x-axis-major-stroke,
            x-axis-major-stroke-thickness: $x-axis-major-stroke-thickness,
            x-axis-minor-stroke: $x-axis-minor-stroke,
            x-axis-minor-stroke-thickness: $x-axis-minor-stroke-thickness,
            x-axis-strip: $x-axis-strip,
            x-axis-stroke: $x-axis-stroke,
            x-axis-stroke-thickness: $x-axis-stroke-thickness,
            x-axis-tick-length: $x-axis-tick-length,
            x-axis-tick-stroke: $x-axis-tick-stroke,
            x-axis-tick-stroke-thickness: $x-axis-tick-stroke-thickness,
            x-axis-title-alignment: $x-axis-title-alignment,
            x-axis-title-text-color: $x-axis-title-text-color,
            x-axis-title-text-style: $x-axis-title-text-style,
            y-axis-label-text-color: $y-axis-label-text-color,
            y-axis-label-text-style: $y-axis-label-text-style,
            y-axis-label-vertical-alignment: $y-axis-label-vertical-alignment,
            y-axis-major-stroke: $y-axis-major-stroke,
            y-axis-major-stroke-thickness: $y-axis-major-stroke-thickness,
            y-axis-minor-stroke: $y-axis-minor-stroke,
            y-axis-minor-stroke-thickness: $y-axis-minor-stroke-thickness,
            y-axis-strip: $y-axis-strip,
            y-axis-stroke: $y-axis-stroke,
            y-axis-stroke-thickness: $y-axis-stroke-thickness,
            y-axis-title-alignment: $y-axis-title-alignment,
            y-axis-title-text-color: $y-axis-title-text-color,
            y-axis-title-text-style: $y-axis-title-text-style,
            y-axis-tick-length: $y-axis-tick-length,
            y-axis-tick-stroke: $y-axis-tick-stroke,
            y-axis-tick-stroke-thickness: $y-axis-tick-stroke-thickness,
        )
    );
}

/// Adds typography styles for the category-chart component.
/// Uses the 'h6', 'subtitle-1' and 'body-2'
/// 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,
/// 'x-axis-label-text-style': 'body-2',
/// 'y-axis-label-text-style': 'body-2',
/// 'x-axis-title-text-style': 'body-2',
/// 'y-axis-title-text-style': 'body-2',
/// )] - The categories from the typographic scale used for type styles.
/// @requires {mixin} type-style
@mixin category-chart-typography(
    $type-scale,
    $categories: (
        'title': 'h6',
        'subtitle': 'subtitle-1',
        'x-axis-label-text-style': 'body-2',
        'x-axis-title-text-style': 'body-2',
        'y-axis-label-text-style': 'body-2',
        'y-axis-title-text-style': 'body-2'
    ),
    $target: 'angular'
) {
    $name: 'category-chart';
    $selector: map.get(
        (
            'angular': 'igx-category-chart',
            'webc': 'igc-category-chart',
            'blazor': 'igb-category-chart',
        ),
        $target
    );
    $title: map.get($categories, 'title');
    $subtitle: map.get($categories, 'subtitle');
    $x-axis-label-text-style: map.get($categories, 'x-axis-label-text-style');
    $x-axis-title-text-style: map.get($categories, 'x-axis-title-text-style');
    $y-axis-label-text-style: map.get($categories, 'y-axis-label-text-style');
    $y-axis-title-text-style: map.get($categories, 'y-axis-title-text-style');
    $title-styles: type-scale-category($type-scale, $title);
    $subtitle-styles: type-scale-category($type-scale, $subtitle);
    $x-axis-label-styles: type-scale-category($type-scale, $x-axis-label-text-style);
    $x-axis-title-styles: type-scale-category($type-scale, $x-axis-title-text-style);
    $y-axis-label-styles: type-scale-category($type-scale, $y-axis-label-text-style);
    $y-axis-title-styles: type-scale-category($type-scale, $y-axis-title-text-style);

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