@use 'sass:map';
@use '../../base' as *;
@use '../../themes/schemas' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
/// @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 {Color} $background-color [null] - The toolbar background color.
/// @param {Color} $title-text-color [null] - The toolbar title text color.
/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color.
/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color.
/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color.
/// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color.
/// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color.
/// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color.
/// @param {Color} $border-color [null] - The toolbar border-bottom color.
/// @requires $light-material-schema
/// @example scss Change the toolbar background color
///   $my-toolbar-theme: grid-toolbar-theme(
///     $background-color: black
///   );
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-toolbar-theme);
@function grid-toolbar-theme(
    $schema: $light-material-schema,

    $background-color: null,
    $title-text-color: null,

    $dropdown-background: null,
    $item-text-color: null,
    $item-hover-background: null,
    $item-hover-text-color: null,
    $item-focus-background: null,
    $item-focus-text-color: null,
    $size: null,
    $border-color: null,
) {
    $name: 'igx-grid-toolbar';
    $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';
    $grid-toolbar-schema: ();

    @if map.has-key($schema, 'grid-toolbar') {
        $grid-toolbar-schema: map.get($schema, 'grid-toolbar');
    } @else {
        $grid-toolbar-schema: $schema;
    }

    $theme: digest-schema($grid-toolbar-schema);
    $meta: map.get($theme, '_meta');

    @if not($title-text-color) and $background-color {
        $title-text-color: text-contrast($background-color);
    }

    @if not($item-text-color) and $dropdown-background {
        $item-text-color: text-contrast($dropdown-background);
    }

    @if not($item-hover-text-color) and $dropdown-background {
        $item-hover-text-color: text-contrast($dropdown-background);
    }

    @if not($item-focus-text-color) and $dropdown-background {
        $item-focus-text-color: text-contrast($dropdown-background);
    }

    @if not($item-hover-text-color) and $item-hover-background {
        $item-hover-text-color: text-contrast($item-hover-background);
    }

    @if not($item-focus-text-color) and $item-focus-background {
        $item-focus-text-color: text-contrast($item-focus-background);
    }

    @return extend($theme, (
        name: $name,
        selector: $selector,
        background-color: $background-color,
        title-text-color: $title-text-color,
        item-text-color: $item-text-color,
        dropdown-background: $dropdown-background,
        item-hover-background: $item-hover-background,
        item-hover-text-color: $item-hover-text-color,
        item-focus-background: $item-focus-background,
        item-focus-text-color: $item-focus-text-color,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
        size: $size,
        border-color: $border-color
    ));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin grid-toolbar($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'variant');
    $bootstrap-theme: $variant == 'bootstrap';

    // Caption
    $grid-toolbar-fs: rem(16px);

    $grid-toolbar-padding-start: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );

    $grid-toolbar-padding-end: (
        comfortable: rem(16px),
        cosy: rem(12px),
        compact: rem(8px)
    );

    $grid-toolbar-padding-start-indigo: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );

    $grid-toolbar-padding-end-indigo: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );


    $grid-toolbar-spacer: (
        comfortable: rem(16px),
        cosy: rem(12px),
        compact: rem(8px)
    );

    $grid-toolbar-spacer-indigo: (
        comfortable: rem(16px),
        cosy: rem(16px),
        compact: rem(16px)
    );

    $grid-toolbar-height: (
        comfortable: rem(58px),
        cosy: rem(52px),
        compact: rem(44px)
    );

    %igx-grid-toolbar {
        @include sizable();
        --component-size: var(--ig-size, var(--ig-size-large));
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-row: 1;
        font-size: $grid-toolbar-fs;
        border-bottom: rem(1px) solid var-get($theme, 'border-color');
        background: var-get($theme, 'background-color');
        height: auto;
        min-height: var-get($theme, 'size');
        padding-block: 0;

        @if $variant == 'indigo' {
            padding-inline-start: pad-inline(map.get($grid-toolbar-padding-start-indigo, 'compact'), map.get($grid-toolbar-padding-start-indigo, 'cosy'), map.get($grid-toolbar-padding-start-indigo, 'comfortable'));
            padding-inline-end: pad-inline(map.get($grid-toolbar-padding-end-indigo, 'compact'), map.get($grid-toolbar-padding-end-indigo, 'cosy'), map.get($grid-toolbar-padding-end-indigo, 'comfortable'));
        } @else {
            padding-inline-start: pad-inline(map.get($grid-toolbar-padding-start, 'compact'), map.get($grid-toolbar-padding-start, 'cosy'), map.get($grid-toolbar-padding-start, 'comfortable'));
            padding-inline-end: pad-inline(map.get($grid-toolbar-padding-end, 'compact'), map.get($grid-toolbar-padding-end, 'cosy'), map.get($grid-toolbar-padding-end, 'comfortable'));
        }

        [igxButton] {
            margin-inline-start: pad-inline(map.get($grid-toolbar-spacer, 'compact'), map.get($grid-toolbar-spacer, 'cosy'), map.get($grid-toolbar-spacer, 'comfortable'));

            &:first-of-type {
                margin-inline-start: 0;
            }

            &:last-of-type {
                margin-inline-end: 0;
            }
        }

        &[dir='rtl'] {
            text-align: end;

            [igxButton] {
                margin-inline-start: 0;
                margin-inline-end: rem(8);

                &:last-child {
                    margin-inline-end: 0;
                }
            }
        }
    }

    %igx-grid-toolbar__title {
        @if $variant == 'indigo' {
            /* stylelint-disable scss/at-extend-no-missing-placeholder */
            @extend .ig-typography__h6;
            /* stylelint-enable scss/at-extend-no-missing-placeholder */
        }

        color: var-get($theme, 'title-text-color');
        flex: 1 1 auto;
        @include ellipsis();
        max-width: 40ch;

        @if $variant == 'indigo' {
            margin-inline-end: map.get($grid-toolbar-spacer-indigo, 'comfortable')
        } @else {
            margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')
        }
    }

    %igx-grid-toolbar__custom-content {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        justify-content: flex-end;

        @if $variant == 'indigo' {
            margin-inline-end: map.get($grid-toolbar-spacer-indigo, 'comfortable')
        } @else {
            margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')
        }
    }

    %igx-grid-toolbar__actions {
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        margin-inline-start: auto;

        @if $variant == 'indigo' {
            gap: map.get($grid-toolbar-spacer-indigo, 'comfortable')
        } @else {
            gap: map.get($grid-toolbar-spacer, 'comfortable')
        }

        > * {
            display: flex;
        }
    }

    %igx-grid-toolbar__actions,
    %igx-grid-toolbar__title,
    %igx-grid-toolbar__custom-content {
        &:empty {
            display: none;
        }
    }

    %igx-grid-toolbar__title:empty + %igx-grid-toolbar__custom-content:empty {
        + %igx-grid-toolbar__actions {
            width: 100%;
            margin-inline-start: 0;
            justify-content: flex-end;
        }
    }

    %igx-grid-toolbar__progress-bar {
        position: absolute;
        width: 100%;
        inset-inline-start: 0;
        inset-inline-end: 0;
        bottom: rem(-1px);
        height: rem(2px);
        overflow: hidden;
        background: var-get($theme, 'background-color');

        igx-linear-bar > * {
            border-radius: 0;

            &:first-child > div {
                background: color($color: 'secondary');
            }
        }
    }

    %igx-grid-toolbar__dropdown {
        position: relative;
    }

    %igx-grid-toolbar__dd-list {
        list-style: none;
        background: var-get($theme, 'dropdown-background');
        margin: 0;
        padding: 0;
        box-shadow: elevation(8);
    }

    %igx-grid-toolbar__dd-list-items {
        cursor: pointer;
        position: relative;
        padding: rem(8px) rem(16px);
        color: var-get($theme, 'item-text-color');
        white-space: nowrap;

        &:hover {
            background: var-get($theme, 'item-hover-background');
            color: var-get($theme, 'item-hover-text-color');
        }

        &:focus {
            background: var-get($theme, 'item-focus-background');
            color: var-get($theme, 'item-focus-text-color');
        }
    }
}