////
/// @group modules.controls
////

@use '../../site' as *;
@use '../../utils' as *;
@use 'helpers.scss' as *;

// ---------------------------------------------------------------------------
// CONFIG
// ---------------------------------------------------------------------------

/// @type config

$-defaults: ();

@include defaults($-defaults);

// ----------------------------------------------------------------------------
// PUBLIC API
// ----------------------------------------------------------------------------

@function toggle-switch($overrides: ()) {
    // get defaults from global config
    $config: get('controls.toggle-switch', null);

    $toggle-switch: (
        display: inline-flex,
        align-items: center,
        padding: 0,
        line-height: 1,
        cursor: pointer,
        user-select: none,
        background-color: transparent,
        gap: 0.25em,
        --track: (
            display: flex,
            align-items: center,
            box-sizing: border-box,
            width: 1.9em,
            height: 1em,
            padding: 3px,
            border-radius: 1em,
            font-size: 1.25em,
            background-color: rgba(gray(-8), 0.33),
            box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2),
            transition: transition(background-color),
        ),
        --thumb: (
            font-size: inherit,
            width: calc(1em - 6px),
            height: calc(1em - 6px),
            background-color: white,
            border-radius: 1em,
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4),
            flex: none,
        ),
        --spacer: (
            flex: 0,
            width: 0,
            transition: transition(flex),
        ),
        disabled: (
            cursor: not-allowed,
            --track: (
                opacity: 0.66,
            ),
            --thumb: (
                background-color: gray(9),
                box-shadow: none,
            ),
        ),
        checked: (
            --track: (
                background-color: accent(),
            ),
            --spacer: (
                flex: 1,
            ),
        ),
    );

    // merge and return all the css
    @return flat-merge(control-reset(), $toggle-switch, $config, $overrides);
}

@mixin toggle-switch(
    $overrides: (),
    $track-selector: null,
    $thumb-selector: null,
    $spacer-selector: null,
    $toggle-block: null
) {
    $block: if-null($toggle-block, get-block-name(&));
    $track-selector: if-null($track-selector, '.#{$block}__track');
    $thumb-selector: if-null($thumb-selector, '.#{$block}__thumb');
    $spacer-selector: if-null($spacer-selector, '.#{$block}__spacer');

    $css: toggle-switch($overrides);

    // default (remove map states, we'll handle them after)
    @include css-map(
        $css,
        $aliases: (
            '--track': $track-selector,
            '--thumb': $thumb-selector,
            '--spacer': $spacer-selector
        )
    );
}