@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../elevation/query-builder' as *;

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

/// Generates a base light query builder schema.
/// @type Map
/// @prop {Map} background [color: ('surface', 500)] - The background color of the query builder.
/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the query builder header.
/// @prop {Map} header-foreground [color: ('gray', 900)] - The foreground color of the query builder header.
/// @prop {Color} header-border [transparent] - The border color of the query builder header.
/// @prop {Map} label-foreground [color: ('gray', 700)] - The color for query builder labels "from" & "select".
/// @prop {Map} separator-color [color: ('gray', 500)] - The separator color of the query builder tree block.
/// @prop {Map} subquery-header-background [color: ('gray', 100)] - The background color of the subquery header.
/// @prop {Map} subquery-border-color [color: ('gray', 300)] - The border color of the subquery block.
/// @prop {Color} color-expression-group-and [#9c27b0] - The color of advanced filtering "AND" condition group.
/// @prop {Color} color-expression-group-or [#007254] - The color of advanced filtering "OR" condition group.
/// @prop {Number} subquery-border-radius [rem(12px)] - The border radius of the subquery block.
/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
/// @requires $default-elevation-query-builder
$light-query-builder: extend(
    $default-elevation-query-builder,
    (
        background: (
            color: (
                'surface',
                500,
            ),
        ),

        header-background: (
            color: (
                'surface',
                500,
            ),
        ),

        header-foreground: (
            color: (
                'gray',
                900,
            ),
        ),

        header-border: transparent,

        color-expression-group-and: #9c27b0,

        color-expression-group-or: #007254,

        border-radius: rem(4px),
        subquery-header-background: (
            color: (
                'gray',
                100,
            ),
        ),

        subquery-border-color: (
            color: (
                'gray',
                300,
            ),
        ),

        subquery-border-radius: rem(12px),
        separator-color: (
            color: (
                'gray',
                500,
            ),
        ),

        label-foreground: (
            color: (
                'gray',
                700,
            ),
        ),
        _meta: (
            name: 'query-builder',
            variant: 'light',
        ),
    )
);

/// Generates a material query builder schema.
/// @type Map
/// @requires $light-query-builder
$material-query-builder: extend(
    $light-query-builder,
    (
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent query builder schema.
/// @type Map
/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
/// @requires $light-query-builder
$fluent-query-builder: extend(
    $light-query-builder,
    (
        border-radius: rem(2px),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap query builder schema.
/// @type Map
/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
/// @requires $light-query-builder
$bootstrap-query-builder: extend(
    $light-query-builder,
    (
        header-border: (
            color: (
                'gray',
                300,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo query builder schema.
/// @type Map
/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the query builder.
/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the query builder header.
/// @prop {Number} border-radius [rem(10px)] - The border radius of the query builder.
/// @requires $light-query-builder
$indigo-query-builder: extend(
    $light-query-builder,
    (
        background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        header-background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        border-radius: rem(10px),
        _meta: (
            theme: 'indigo',
        ),
    )
);