// 1.The default theme will be applied to the :root element.
//   As in Figma we make the first theme the default one.
// 2. Set the default text color in each theme.

@use 'sass:map';
@use 'sass:meta';
@use '@tokens' as tokens;
@use 'svg';

@mixin generate($themes, $add-background-image-urls: true) {
    // 1.
    $is-default-theme: true;

    @each $theme-name, $theme-token-types in $themes {
        $selector: if($is-default-theme, ':root, .#{$theme-name}', '.#{$theme-name}');
        $theme-variables: map.get($theme-token-types, variables);
        $theme-mixins: map.get($theme-token-types, mixins);

        #{$selector} {
            @each $theme-mixin-name, $theme-mixin in $theme-mixins {
                @include meta.apply($theme-mixin);
            }

            @if $add-background-image-urls {
                @include generate-background-image-urls($themed-tokens: $theme-variables);
            }
        }

        // 2.
        :where(#{$selector}) {
            color: tokens.$text-primary;
        }

        $is-default-theme: false;
    }
}

@mixin generate-background-image-urls($themed-tokens) {
    // Checkbox
    --#{tokens.$css-variable-prefix}checkbox-input-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M7.71 13.29a.996.996 0 0 1-1.41 0L2.71 9.7a.996.996 0 1 1 1.41-1.41L7 11.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z" style="fill:#{map.get($themed-tokens, selected-content-subtle)}"/></svg>')
        )};
    --#{tokens.$css-variable-prefix}checkbox-input-disabled-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M7.71 13.29a.996.996 0 0 1-1.41 0L2.71 9.7a.996.996 0 1 1 1.41-1.41L7 11.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z" style="fill:#{map.get($themed-tokens, disabled-content)}"/></svg>')
        )};
    --#{tokens.$css-variable-prefix}checkbox-input-indeterminate-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path style="fill:#{map.get($themed-tokens, selected-content-subtle)}" d="M4 8h10v2H4z"/></svg>')
        )};
    --#{tokens.$css-variable-prefix}checkbox-input-indeterminate-disabled-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path style="fill:#{map.get($themed-tokens, disabled-content)}" d="M4 8h10v2H4z"/></svg>')
        )};

    // Slider
    --#{tokens.$css-variable-prefix}slider-thumb-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, neutral-content-basic)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
        )};
    --#{tokens.$css-variable-prefix}slider-thumb-disabled-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, disabled-foreground)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
        )};

    // Toggle
    --#{tokens.$css-variable-prefix}toggle-input-mark-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, component-toggle-unselected-content)}" fill-rule="evenodd" d="M20 0H0v20h20V0Zm-7.302 6.177a.58.58 0 0 1 .823 0 .585.585 0 0 1 0 .816l-2.853 2.853 2.853 2.852a.58.58 0 1 1-.823.823l-2.852-2.853-2.853 2.853a.58.58 0 1 1-.822-.823l2.852-2.852-2.852-2.853a.58.58 0 1 1 .822-.822l2.853 2.852 2.852-2.846Z" clip-rule="evenodd"/></svg>')
        )};
    --#{tokens.$css-variable-prefix}toggle-input-mark-disabled-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, disabled-foreground)}" fill-rule="evenodd" d="M20 0H0v20h20V0Zm-7.302 6.177a.58.58 0 0 1 .823 0 .585.585 0 0 1 0 .816l-2.853 2.853 2.853 2.852a.58.58 0 1 1-.823.823l-2.852-2.853-2.853 2.853a.58.58 0 1 1-.822-.823l2.852-2.852-2.852-2.853a.58.58 0 1 1 .822-.822l2.853 2.852 2.852-2.846Z" clip-rule="evenodd"/></svg>')
        )};
    --#{tokens.$css-variable-prefix}toggle-input-mark-checked-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, component-toggle-selected-content)}" fill-rule="evenodd" d="M20 0H0v20h20V0ZM5.987 9.904l2.042 2.042 5.775-5.775a.574.574 0 0 1 .817 0 .574.574 0 0 1 0 .816l-6.184 6.178a.58.58 0 0 1-.822 0L5.17 10.72a.574.574 0 0 1 0-.817.574.574 0 0 1 .816 0Z" clip-rule="evenodd"/></svg>')
        )};
    --#{tokens.$css-variable-prefix}toggle-input-mark-checked-disabled-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill="#{map.get($themed-tokens, disabled-foreground)}" fill-rule="evenodd" d="M20 0H0v20h20V0ZM5.987 9.904l2.042 2.042 5.775-5.775a.574.574 0 0 1 .817 0 .574.574 0 0 1 0 .816l-6.184 6.178a.58.58 0 0 1-.822 0L5.17 10.72a.574.574 0 0 1 0-.817.574.574 0 0 1 .816 0Z" clip-rule="evenodd"/></svg>')
        )};

    // Tooltip
    --#{tokens.$css-variable-prefix}tooltip-arrow-background-image-url: #{svg.escape(
            url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path fill="#{map.get($themed-tokens, neutral-background-basic)}" d="M4.915,2.054c0.801,-1.04 2.369,-1.04 3.17,-0l9.793,12.721c1.012,1.315 0.074,3.22 -1.585,3.22l-19.586,-0c-1.66,-0 -2.597,-1.905 -1.585,-3.22l9.793,-12.721Z" /></svg>')
        )};
}
