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

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $icon-color [null] - The color used for the actions icons.
/// @param {Color} $background [null] - The color used for the action strip component content background.
/// @param {Color} $actions-background [null] - The color used for the actions background.
/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
///
/// @example scss Change the background and icon colors in action strip
///   $my-action-strip-theme: action-strip-theme($background: black);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-action-strip-theme);
@function action-strip-theme(
    $schema: $light-material-schema,

    $background: null,
    $actions-background: null,
    $icon-color: null,
    $delete-action: null,
    $actions-border-radius: null,
) {
    $name: 'igx-action-strip';
    $action-strip-schema: ();

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

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

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

    @if not($actions-border-radius) {
        $actions-border-radius: border-radius(map.get($theme, 'actions-border-radius')...);
    }

    @return extend($theme, (
        name: $name,
        background: $background,
        actions-background: $actions-background,
        icon-color: $icon-color,
        delete-action: $delete-action,
        actions-border-radius: $actions-border-radius,
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

/// @param {Map} $theme - The theme used to style the component.
@mixin action-strip($theme) {
    @include css-vars($theme);

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

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

    %igx-action-strip-display {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        top: 0;
        inset-inline-start: 0;
        background: var-get($theme, 'background');
        color: inherit;
        padding-inline: pad-inline(map.get($padding-inline, 'compact'), map.get($padding-inline, 'cosy'), map.get($padding-inline, 'comfortable'));
        padding-block: 0;
        z-index: 9999;
    }

    %action-icons-density {
        [igxButton='icon'] {
            width: rem(28px);
            height: rem(28px);

            igx-icon {
                width: var(--igx-icon-size, #{rem(14px)});
                height: var(--igx-icon-size, #{rem(14px)});
                font-size: var(--igx-icon-size, #{rem(14px)});
            }
        }
    }

    %igx-action-strip--cosy,
    %igx-action-strip--compact {
        @extend %action-icons-density;
    }

    %igx-action-strip__editing-actions,
    %igx-action-strip__pinning-actions {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    %igx-action-strip__menu-item {
        [igxLabel] {
            cursor: pointer;
        }

        igx-icon {
            width: var(--igx-icon-size, rem(18px));
            height: var(--igx-icon-size, rem(18px));
            font-size: var(--igx-icon-size, rem(18px));
        }

        igx-icon + [igxLabel] {
            margin-inline-start: rem(12px);
        }

        &%igx-drop-down__item--cosy {
            igx-icon + [igxLabel] {
                margin-inline-start: rem(10px);
            }
        }

        &%igx-drop-down__item--compact {
            igx-icon + [igxLabel] {
                margin-inline-start: rem(8px);
            }
        }
    }

    %igx-action-strip__menu-item--danger {
        color: color($color: 'error');

        &:hover {
            color: color($color: 'error');
        }
    }

    %igx-action-strip__menu-button {
        display: flex;
        align-items: center;
    }

    %igx-action-strip__actions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
        position: relative;
        color: var-get($theme, 'icon-color');
        border-radius: var-get($theme, 'actions-border-radius');
        background: var-get($theme, 'actions-background');
        max-height: rem(36px);

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

        igx-icon {
            color: var-get($theme, 'icon-color');
        }

        [igxButton='icon'] {
            igx-icon {
                color: var-get($theme, 'icon-color');
            }

            @if $variant == 'indigo-design' or $variant == 'fluent' {
                border-radius: var-get($theme, 'actions-border-radius');
            }
        }
    }

    %igx-action-strip__editing-actions {
        > [igxButton] {
            margin-inline-start: rem(4px);

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

    %igx-action-strip__delete {
        igx-icon {
            color: var-get($theme, 'delete-action');
        }
    }
}