@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: 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,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

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

    $variant: map.get($theme, '_meta', 'variant');
    $icon-button-size: map.get((
        'material': rem(36px),
        'fluent': rem(32px),
        'bootstrap': rem(36px),
        'indigo': rem(36px),
    ), $variant);
    $button-size: sizable(rem(28px), rem(28px), $icon-button-size);
    $icon-size: sizable(rem(14px), rem(14px), rem(18px));

    %igx-action-strip {
        @include sizable();
        --action-strip-size: var(--component-size);

        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(rem(12px), rem(16px), rem(24px));
        padding-block: 0;
        z-index: 9999;

        [igxIconButton] {
            --component-size: var(--action-strip-size) !important;

            width: $button-size;
            height: $button-size;

            igx-icon {
                --component-size: var(--action-strip-size);

                width: var(--ig-icon-size, $icon-size);
                height: var(--ig-icon-size, $icon-size);
                font-size: var(--ig-icon-size, $icon-size);
            }
        }
    }

    %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 {
            --component-size: var(--action-strip-size);

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

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

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

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

            @if $variant == 'indigo' 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');
        }
    }
}