@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>
////

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).
/// @param {number} $inset [null] - The inset value of the divider.
/// @requires $light-material-schema
/// @example scss Change the color of the divider
///   $my-divider-theme: divider-theme($color: orange);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-divider-theme);
@function divider-theme(
    $schema: $light-material-schema,
    $color: null,
    $inset: null
) {
    $name: 'igx-divider';
    $divider-schema: ();

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

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

    @return extend($theme, (
        name: $name,
        color: $color,
        inset: $inset,
        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 divider($theme) {
    @include css-vars($theme);

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

    %igx-divider-display {
        position: relative;
        justify-content: center;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            background: var-get($theme, 'color');
        }
    }

    %igx-divider-display:not(%igx-divider--vertical) {
        display: flex;
        min-height: rem(1px);
        min-width: rem(1px);
        position: relative;

        &::after {
            inset-inline-start: var-get($theme, 'inset');
        }

        &:not(%igx-divider--inset) {
            &::after {
                width: 100%;
            }
        }
    }

    %igx-divider--inset:not(%igx-divider--vertical) {
        &::after {
            min-width: rem(4px);
            width: calc(100% - (var-get($theme, 'inset') * 2));
        }
    }

    %igx-divider--dashed:not(%igx-divider--vertical) {
        &::after {
            background: repeating-linear-gradient(
                to right,
                var-get($theme, 'color'),
                var-get($theme, 'color') rem(10px),
                transparent rem(10px),
                transparent rem(20px)
            );

            @if $variant == 'indigo' {
                background: repeating-linear-gradient(
                    to right,
                    var-get($theme, 'color'),
                    var-get($theme, 'color') rem(3px),
                    transparent rem(3px),
                    transparent rem(6px)
                );
            }
        }
    }

    %igx-divider--dashed {
        &::after {
            background: repeating-linear-gradient(
                to bottom,
                var-get($theme, 'color'),
                var-get($theme, 'color') rem(10px),
                transparent rem(10px),
                transparent rem(20px)
            );

            @if $variant == 'indigo' {
                background: repeating-linear-gradient(
                    to bottom,
                    var-get($theme, 'color'),
                    var-get($theme, 'color') rem(3px),
                    transparent rem(3px),
                    transparent rem(6px)
                );
            }
        }
    }

    %igx-divider--vertical {
        display: inline-flex;
        min-width: rem(1px);
        width: rem(1px);

        &::after {
            inset-block-start: var-get($theme, 'inset');
            width: 100%;
            height: 100%;
        }
    }

    %igx-divider--vertical-inset {
        &::after {
            min-height: rem(4px);
            height: calc(100% - (var-get($theme, 'inset') * 2));
        }
    }
}