@use '../../../../utils/map' as *;
@use '../light/grid' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Generates the base dark grid schema.
/// @type {Map}
/// @prop {Color} content-background [color: 'surface'] - The table body background color.
/// @prop {Map} drop-area-background [color: ('gray', 100, .4)] - The drop area background color.
/// @prop {Map} header-border-color [color: ('gray', 200, .24)] - The color used for header borders.
/// @prop {Map} header-background [color: ('gray', 100)] - The table header background color.
/// @prop {Map} header-selected-background [color: ('secondary', 600)] - The table header background color when selected (ex. column selection).
/// @prop {Map} header-selected-text-color [contrast-color: ('secondary', 600)] - The table header text color when selected (ex. column selection).
/// @prop {Map} row-border-color [color: ('gray', 200, .24)] - The row bottom border color.
/// @prop {Map} row-hover-background [color: ('gray', 100)] - The hover row background color.
/// @prop {Map} row-hover-text-color [contrast-color: ('gray', 100)] - The hover row text color.
/// @prop {Map} row-selected-background [color: ('secondary', 'A700')] - The selected row background color.
/// @prop {Map} row-selected-hover-background [color: ('secondary', 'A400')] - The selected row background color on hover.
/// @prop {Map} row-selected-text-color [contrast-color: ('secondary', 'A700')] - The selected row text color.
/// @prop {Map} row-selected-hover-text-color [contrast-color: ('secondary', 'A400')] - The selected row hover text color.
/// @prop {Map} row-highlight [color: ('secondary', 500)] - The highlight color of a row.
/// @prop {Map} row-ghost-background [color: ('primary', 900)] - The dragged row background color.
/// @prop {Map} cell-selected-background [color: ('gray', 100)] - The selected cell background color.
/// @prop {Map} cell-selected-text-color [contrast-color: ('gray', 100)] - The selected cell text color.
/// @prop {Map} cell-selected-within-background [color: ('secondary', 'A400')] - The background of the selected cell inside a selected row/column.
/// @prop {Map} cell-selected-within-text-color [contrast-color: ('secondary', 'A400')] - The color of the selected cell inside a selected row/column.
/// @prop {Map} grouparea-background [color: ('gray', 50)] - The grid group area background color.
/// @prop {Map} group-row-background [color: ('gray', 50)] - The grid group row background color.
/// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
$base-dark-grid: (
    content-background: (
        color: 'surface',
    ),

    drop-area-background: (
        color: (
            'gray',
            100,
            0.4,
        ),
    ),

    header-border-color: (
        color: (
            'gray',
            200,
            0.24,
        ),
    ),

    header-background: (
        color: (
            'gray',
            100,
        ),
    ),

    header-selected-background: (
        color: (
            'secondary',
            600,
        ),
    ),

    header-selected-text-color: (
        contrast-color: (
            'secondary',
            600,
        ),
    ),

    row-border-color: (
        color: (
            'gray',
            200,
            0.24,
        ),
    ),

    row-hover-background: (
        color: (
            'gray',
            100,
        ),
    ),

    row-hover-text-color: (
        contrast-color: (
            'gray',
            100,
        ),
    ),

    row-selected-background: (
        color: (
            'secondary',
            'A700',
        ),
    ),

    row-selected-hover-background: (
        color: (
            'secondary',
            'A400',
        ),
    ),

    row-selected-text-color: (
        contrast-color: (
            'secondary',
            'A700',
        ),
    ),

    row-selected-hover-text-color: (
        contrast-color: (
            'secondary',
            'A400',
        ),
    ),

    row-highlight: (
        color: (
            'secondary',
            500,
        ),
    ),

    row-ghost-background: (
        color: (
            'primary',
            900,
        ),
    ),

    cell-selected-within-background: (
        color: (
            'secondary',
            'A400',
        ),
    ),

    cell-selected-within-text-color: (
        contrast-color: (
            'secondary',
            'A400',
        ),
    ),

    cell-selected-background: (
        color: (
            'gray',
            100,
        ),
    ),

    cell-selected-text-color: (
        contrast-color: (
            'gray',
            100,
        ),
    ),

    grouparea-background: (
        color: (
            'gray',
            50,
        ),
    ),

    group-row-background: (
        color: (
            'gray',
            50,
        ),
    ),

    group-row-selected-background: (
        color: (
            'gray',
            100,
        ),
    ),
);

/// Generates a dark material grid schema based on a mix of $material-grid and $base-dark-grid.
/// @type {Map}
/// @prop {Map} summaries-patch-background [color: ('gray', 50)] - The leading summaries patch backround. Used in hierarchical grids.
/// @requires $material-grid
/// @requires $base-dark-grid
$dark-material-grid: extend(
    $material-grid,
    $base-dark-grid,
    (
        summaries-patch-background: (
            color: (
                'gray',
                50,
            ),
        ),

        _meta: (
            theme: 'material',
            variant: 'dark',
        ),
    )
);

/// Generates a dark fluent grid schema based on a mix of $fluent-grid and $base-dark-grid.
/// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection).
/// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection).
/// @prop {Map} row-selected-background [color: ('gray', 100)] - The selected row background color.
/// @prop {Map} row-selected-hover-background [color: ('gray', 200)] - The selected row background color on hover.
/// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
/// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
/// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
/// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
///
/// @requires $fluent-grid
/// @requires $base-dark-grid
$dark-fluent-grid: extend(
    $fluent-grid,
    $base-dark-grid,
    (
        header-selected-background: (
            color: (
                'gray',
                200,
            ),
        ),

        header-selected-text-color: (
            contrast-color: (
                'gray',
                200,
            ),
        ),

        pinned-border-color: (
            color: (
                'gray',
                300,
                0.24,
            ),
        ),

        row-selected-background: (
            color: (
                'gray',
                100,
            ),
        ),

        row-selected-hover-text-color: (
            contrast-color: (
                'gray',
                200,
            ),
        ),

        cell-selected-within-background: (
            color: (
                'gray',
                200,
            ),
        ),

        cell-selected-within-text-color: (
            contrast-color: (
                'gray',
                200,
            ),
        ),

        row-selected-hover-background: (
            color: (
                'gray',
                200,
            ),
        ),

        group-row-background: (
            color: (
                'gray',
                100,
                0.5,
            ),
        ),
        _meta: (
            theme: 'fluent',
            variant: 'dark',
        ),
    )
);

/// Generates a dark bootstrap grid schema based on a mix of $bootstrap-grid and $base-dark-grid.
/// @type {Map}
/// @prop {Map} group-row-background [color: 'surface'] - The grid group row background color.
/// @prop {Map} group-row-selected-background [color: 'surface'] - The drop area background on drop color.
/// @prop {Map} header-background [color: ('gray', 50)] - The table header background color.
/// @prop {Map} content-background [color: ('gray', 50)] - The table body background color.
/// @prop {Map} drop-area-background [color: ('gray', 100, .5)] - The drop area background color.
/// @prop {Map} grouparea-background [color: 'surface'] - The grid group area background color.
/// @prop {Map} grouparea-color [contrast-color: 'surface'] - The grid group area color.
/// @prop {Map} summaries-patch-background [color: ('gray', 100)] - The leading summaries patch backround. Used in hierarchical grids.
/// @requires $bootstrap-grid
/// @requires $base-dark-grid
$dark-bootstrap-grid: extend(
    $bootstrap-grid,
    $base-dark-grid,
    (
        group-row-background: (
            color: 'surface',
        ),

        group-row-selected-background: (
            color: 'surface',
        ),

        header-background: (
            color: (
                'gray',
                50,
            ),
        ),

        content-background: (
            color: (
                'gray',
                50,
            ),
        ),

        drop-area-background: (
            color: (
                'gray',
                100,
                0.5,
            ),
        ),

        summaries-patch-background: (
            color: (
                'gray',
                100,
            ),
        ),

        _meta: (
            theme: 'bootstrap',
            variant: 'dark',
        ),
    )
);

/// Generates a dark indigo grid schema.
/// @type {Map}
/// @prop {Map} content-text-color [contrast-color: ('gray', 50, .8)] - The table body text color.
/// @prop {Map} header-border-color [color: ('gray', 200)] - The color used for header borders.
/// @prop {MAp} header-text-color [contrast-color: ('gray', 50, .9)] - The table header text color.
/// @prop {Map} header-selected-background [color: ('primary', 900)] - The table header background color when selected (ex. column selection).
/// @prop {Map} header-selected-text-color [contrast-color: ('gray' 50)] - The table header text color when selected (ex. column selection).
/// @prop {Map} filtering-header-background [color: ('gray', 100)] - The background color of the filtered column header.
/// @prop {Map} filtering-header-text-color [contrast-color: ('gray', 50)] - The text color color of the filtered column header.
/// @prop {Map} pinned-border-color [color: ('gray', 200)] - The color of the pinned border.
/// @prop {Map} drop-area-text-color [contrast-color: ('gray', 50, .6)] - The drop area text color.
/// @prop {Map} drop-area-icon-color [contrast-color: ('gray', 50, .6)] - The drop area icon color.
/// @prop {Map} row-border-color [color: ('gray', 100)] - The row bottom border color.
/// @prop {Map} row-hover-background [color: ('primary', 100)] - The hover row background color.
/// @prop {Map} row-hover-text-color [contrast-color: ('gray', 50)] - The hover row text color.
/// @prop {Map} row-selected-background [color: ('primary', 900)] - The selected row background color.
/// @prop {Map} row-selected-text-color [contrast-color: ('primary', 900)] - The selected row text color.
/// @prop {Map} row-selected-hover-background [color: ('primary', 700)] - The selected row hover background.
/// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 50)] - The selected row text color.
/// @prop {Map} group-row-background [color: 'surface'] - The grid group row background color.
/// @prop {Map} group-row-selected-background [color: ('gray', 200)] - The drop area background on drop color.
/// @prop {Map} group-label-column-name-text [contrast-color: ('gray', 50, .8)] - The grid group row column name text color.
/// @prop {Map} group-label-icon [contrast-color: ('gray', 50, .8)] - The grid group row icon color.
/// @prop {Map} group-label-text [contrast-color: ('gray', 50)] - The grid group row text color.
/// @prop {Map} cell-selected-within-background [color: ('primary', 700)] - The background of the selected cell inside a selected row/column.
/// @prop {Map} cell-selected-within-text-color [contrast-color: ('primary', 900)] - The color of the selected cell inside a selected row/column.
/// @prop {Map} cell-selected-background [color: ('primary', 900)] - The selected cell background color.
/// @prop {Map} cell-selected-text-color [contrast-color: ('primary', 900)] - The selected cell text color.
/// @prop {Map} expand-icon-color [contrast-color: ('gray', 50, .8)] - The grid row expand icon color.
/// @prop {Map} expand-icon-hover-color [contrast-color: ('gray', 50)] - The grid row expand icon hover color.
/// @prop {Map} active-expand-icon-color [contrast-color: ('gray', 50, .8)] - The drop area background on drop color.
/// @prop {Map} drop-area-on-drop-background [color: ('gray', 100)] - The drop area background on drop color.
/// @prop {Map} header-background [color: ('surface', 500)] - The table header background color.
/// @prop {Map} content-background [color: ('surface', 500)] - The table body background color.
/// @prop {Map} cell-editing-background [color: ('gray' 100)] - The background for the cell in editing mode.
/// @prop {Map} cell-editing-foreground [contrast-color: ('gray', 50)] - The cell text color in edit mode
/// @prop {Map} cell-edited-value-color [contrast-color: ('gray', 50)] - The color of cell edited value.
/// @prop {Map} cell-disabled-color [contrast-color: ('gray', 50, .2)] - The text color of a disabled cell.
/// @prop {Map} drop-area-background [color: ('gray', 100)] - The drop area background color.
/// @prop {Map} excel-filtering-actions-foreground [contrast-color: ('gray', 50, .9)] - The text color of the excel style filtering options.
/// @prop {Map} excel-filtering-actions-hover-foreground [contrast-color: ('gray', 50)] - The text color of the excel style filtering options in hover/focus state.
/// @prop {Map} excel-filtering-actions-disabled-foreground [contrast-color: ('gray', 50, .2)] - The text color of the excel style filtering options in disabled state.
/// @prop {Map} row-ghost-background [color: ('gray', 100)] - The background color of the dragged row.
/// @requires $indigo-grid
$dark-indigo-grid: extend(
    $indigo-grid,
    (
        content-background: (
            color: (
                'surface',
                500,
            ),
        ),

        content-text-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        header-border-color: (
            color: (
                'gray',
                200,
            ),
        ),

        header-text-color: (
            contrast-color: (
                'gray',
                50,
                0.9,
            ),
        ),

        header-selected-background: (
            color: (
                'primary',
                900,
            ),
        ),

        header-selected-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        active-expand-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        filtering-header-background: (
            color: (
                'gray',
                100,
            ),
        ),

        filtering-header-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        pinned-border-color: (
            color: (
                'gray',
                200,
            ),
        ),

        drop-area-text-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

        drop-area-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),

        row-border-color: (
            color: (
                'gray',
                100,
            ),
        ),

        row-hover-background: (
            color: (
                'gray',
                100,
            ),
        ),

        row-hover-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        row-selected-background: (
            color: (
                'primary',
                900,
            ),
        ),

        row-selected-text-color: (
            contrast-color: (
                'primary',
                900,
            ),
        ),

        row-selected-hover-background: (
            color: (
                'primary',
                700,
            ),
        ),

        row-selected-hover-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        group-row-background: (
            color: (
                'gray',
                50,
            ),
        ),

        group-row-selected-background: (
            color: (
                'gray',
                100,
            ),
        ),

        group-label-column-name-text: (
            contrast-color: (
                'gray' 50,
                0.8,
            ),
        ),

        group-label-icon: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        group-label-text: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        cell-selected-within-background: (
            color: (
                'primary',
                700,
            ),
        ),

        cell-selected-within-text-color: (
            contrast-color: (
                'primary',
                900,
            ),
        ),

        cell-selected-background: (
            color: (
                'primary',
                900,
            ),
        ),

        cell-selected-text-color: (
            contrast-color: (
                'primary',
                900,
            ),
        ),

        expand-icon-color: (
            contrast-color: (
                'gray',
                50,
                0.8,
            ),
        ),

        expand-icon-hover-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        drop-area-on-drop-background: (
            color: (
                'gray',
                100,
            ),
        ),

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

        cell-editing-background: (
            color: (
                'gray',
                100,
            ),
        ),

        cell-editing-foreground: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        cell-edited-value-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        cell-disabled-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        drop-area-background: (
            color: (
                'gray',
                100,
            ),
        ),

        excel-filtering-actions-foreground: (
            contrast-color: (
                'gray',
                50,
                0.9,
            ),
        ),

        excel-filtering-actions-hover-foreground: (
            contrast-color: (
                'gray',
                50,
            ),
        ),

        excel-filtering-actions-disabled-foreground: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),

        row-ghost-background: (
            color: (
                'gray',
                100,
            ),
        ),

        _meta: (
            theme: 'indigo',
            variant: 'dark',
        ),
    )
);