////
/// @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} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-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.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
///
/// @example scss Change the toolbar background color
///   $my-toolbar-theme: igx-grid-toolbar-theme(
///     $background-color: black
///   );
///   // Pass the theme to the igx-grid-filtering component mixin
///   @include igx-grid-toolbar($my-toolbar-theme);

@function igx-grid-toolbar-theme(
    $palette: $default-palette,
    $schema: $light-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
) {
    $name: 'igx-grid-toolbar';
    $grid-toolbar-schema: ();

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

    $theme: apply-palette($grid-toolbar-schema, $palette);

    @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,
        palette: $palette,

        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
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires igx-color
/// @requires {mixin} ellipsis
/// @requires rem
/// @requires em
/// @requires --var
@mixin igx-grid-toolbar($theme) {
    @include igx-root-css-vars($theme);

    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

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

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

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

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

    %igx-grid-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        grid-row: 1;
        font-size: $grid-toolbar-fs;
        border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300);
        background: --var($theme, 'background-color');
        height: map-get($grid-toolbar-height, 'comfortable');

        @include if-ltr(){
            padding: map-get($grid-toolbar-padding, 'comfortable');
        }

        @include if-rtl(){
            padding: map-get($grid-toolbar-padding-rtl, 'comfortable');
        }

        %igx-button--outlined,
        %igx-button--raised,
        %igx-button--flat,
        %igx-button--icon{
            margin-#{$left}: rem(8);
        }

        %igx-grid-toolbar__button-space {
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                &:empty {
                    display: none;
                }
            }

            > * {
                margin-#{$left}: rem(8px);

                &:first-child {
                    margin-#{$left}: 0;
                }
            }
        }

        &[dir='rtl'] {
            text-align: #{$right};

            %igx-button--outlined,
            %igx-button--raised,
            %igx-button--flat,
            %igx-button--icon{
                margin-#{$left}: 0;
                margin-#{$right}: rem(8);
            }

            %igx-grid-toolbar__button-space {
                text-align: #{$right};

                > * {
                    margin-#{$left}: 0;
                    margin-#{$right}: rem(8px);
                }

                > *:last-child {
                    margin-#{$left}: 0;
                }
            }
        }
    }

    %igx-grid-toolbar--cosy {
        height: map-get($grid-toolbar-height, 'cosy');
        @include if-ltr() {
            padding: map-get($grid-toolbar-padding, 'cosy');
        }

        @include if-rtl() {
            padding: map-get($grid-toolbar-padding-rtl, 'cosy');
        }
    }

    %igx-grid-toolbar--compact {
        height: map-get($grid-toolbar-height, 'compact');
        @include if-ltr() {
            padding: map-get($grid-toolbar-padding, 'compact');
        }

        @include if-rtl() {
            padding: map-get($grid-toolbar-padding-rtl, 'compact');
        }
    }

    %grid-caption {
        display: flex;
        align-items: center;
    }

    %igx-grid-toolbar__title {
        color: --var($theme, 'title-text-color');
        flex: 1 1 auto;
        @include ellipsis();
    }

    %igx-grid-toolbar__custom-content {
        display: flex;
        flex-flow: row wrap;
    }

    %igx-grid-toolbar__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;

        > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    %igx-grid-toolbar__adv-filter--filtered {
        border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
    }

    %igx-grid-toolbar__dropdown {
        position: relative;

        %igx-filtering-menu {
            padding: rem(0);
            #{$right}: 0;
            margin: 0;
            min-width: auto;
        }
    }

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

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

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

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