@use 'true' as test;
@use '../../settings/dictionaries' as dictionaries-settings;
@use '../../settings/links' as links-settings;
@use '../dictionaries';

@include test.describe('generate-alignments mixin') {
    @include test.it('should generate correct alignment classes based on a dictionary') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-alignments(
                    $class-name: 'Test',
                    $dictionary-values: (
                        'left',
                    ),
                    $axis: 'x'
                );
            }

            @include test.expect() {
                .Test--alignmentXLeft {
                    justify-content: start;
                }
            }
        }

        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-alignments(
                    $class-name: 'Test',
                    $dictionary-values: (
                        'stretch',
                    ),
                    $axis: 'x',
                    $property: 'justify-items',
                    $infix: 'tablet--'
                );
            }

            @include test.expect() {
                .Test--tablet--alignmentXStretch {
                    justify-items: stretch;
                }
            }
        }
    }
}

@include test.describe('generate-colors mixin') {
    @include test.it('should generate correct color classes based on a dictionary') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-colors(
                    $class-name: 'Test',
                    $dictionary-values: (
                        this-is-long-so-prettier-breaks-the-output-to-new-line: (
                            primary,
                            secondary,
                            tertiary,
                        ),
                    ),
                    $config: (
                        color: 'content',
                    )
                );
            }

            @include test.expect() {
                .Test--primary {
                    --spirit-test-color: var(
                        --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-primary-content
                    );
                }

                .Test--secondary {
                    --spirit-test-color: var(
                        --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-secondary-content
                    );
                }

                .Test--tertiary {
                    --spirit-test-color: var(
                        --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-tertiary-content
                    );
                }
            }
        }
    }

    @include test.it('should generate correct color classes and data attributes based on a dictionary') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-colors(
                    $class-name: 'Test',
                    $dictionary-values: (
                        this-is-long-so-prettier-breaks-the-output-to-new-line: (
                            primary,
                            secondary,
                            tertiary,
                        ),
                    ),
                    $config: (
                        color: 'content',
                    ),
                    $generate-data-attribute: true
                );
            }

            @include test.expect() {
                .Test--primary,
                .Test[data-spirit-color='primary'] {
                    --spirit-test-color: var(
                        --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-primary-content
                    );
                }

                .Test--secondary,
                .Test[data-spirit-color='secondary'] {
                    --spirit-test-color: var(
                        --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-secondary-content
                    );
                }

                .Test--tertiary,
                .Test[data-spirit-color='tertiary'] {
                    --spirit-test-color: var(
                        --spirit-color-this-is-long-so-prettier-breaks-the-output-to-new-line-tertiary-content
                    );
                }
            }
        }
    }
}

@include test.describe('prepare-button-links mixin') {
    @include test.it('should generate correct button link classes based on a dictionary') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.prepare-button-links(
                    $dictionary-values: (
                        primary,
                        secondary,
                        tertiary,
                    )
                );
            }

            @include test.expect() {
                // stylelint-disable selector-no-qualifying-type, order/properties-order -- We need to allow this to make sass-true work
                button.link-primary,
                button.link-secondary,
                button.link-tertiary {
                    appearance: none;
                    display: inline-flex;
                    flex: none;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    font: inherit;
                    border: none;
                    border-radius: 0;
                    background: none;
                    box-shadow: none;
                    cursor: pointer;
                    text-decoration-skip-ink: none;
                    text-underline-offset: 0.1875em;
                    user-select: text;
                }

                @media (hover: hover) {
                    button.link-primary:hover,
                    button.link-secondary:hover,
                    button.link-tertiary:hover {
                        text-decoration: underline;
                    }
                }

                button.link-primary:active,
                button.link-secondary:active,
                button.link-tertiary:active {
                    text-decoration: underline;
                }
                // stylelint-enable selector-no-qualifying-type, order/properties-order
            }
        }
    }
}

@include test.describe('generate-link-colors mixin') {
    @include test.it('should generate correct link color classes based on a dictionary') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-link-colors(
                    $selector: '.link',
                    $dictionary-values: (
                        primary,
                        secondary,
                        tertiary,
                    )
                );
            }

            @include test.expect() {
                .link-primary {
                    color: var(--spirit-color-link-primary-state-default);
                }

                .link-primary:hover {
                    color: var(--spirit-color-link-primary-state-hover);
                }

                .link-primary:active {
                    color: var(--spirit-color-link-primary-state-active);
                }

                .link-secondary {
                    color: var(--spirit-color-link-secondary-state-default);
                }

                .link-secondary:hover {
                    color: var(--spirit-color-link-secondary-state-hover);
                }

                .link-secondary:active {
                    color: var(--spirit-color-link-secondary-state-active);
                }

                .link-tertiary {
                    color: var(--spirit-color-link-tertiary-state-default);
                }

                .link-tertiary:hover {
                    color: var(--spirit-color-link-tertiary-state-hover);
                }

                .link-tertiary:active {
                    color: var(--spirit-color-link-tertiary-state-active);
                }
            }
        }
    }
}

@include test.describe('generate-placements mixin') {
    @include test.it('should generate correct placement classes based on a dictionary') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-placements(
                    $class-name: 'Test',
                    $dictionary-values: (
                        'top-start',
                    )
                );
            }

            @include test.expect() {
                .Test[data-spirit-placement='top-start'] {
                    --test-offset: 0;

                    inset: auto auto 100% 0;
                    translate: var(--test-offset-orthogonal, 0) calc(-1 * var(--test-offset, 0));
                    transform-origin: bottom left;
                }
            }
        }

        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-placements(
                    $class-name: 'Test',
                    $dictionary-values: (
                        'right-end',
                    )
                );
            }

            @include test.expect() {
                .Test[data-spirit-placement='right-end'] {
                    --test-offset: 0;

                    inset: auto auto 0 100%;
                    translate: var(--test-offset, 0) var(--test-offset-orthogonal, 0);
                    transform-origin: left bottom;
                }
            }
        }

        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-placements(
                    $class-name: 'Test',
                    $dictionary-values: (
                        'top-start',
                    ),
                    $offset: 10px,
                    $is-controlled: true
                );
            }

            @include test.expect() {
                .Test[data-spirit-placement='top-start'] {
                    --test-offset: 10px;
                    --test-offset-orthogonal: 0;

                    transform-origin: bottom left;
                }
            }
        }

        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-placements(
                    $class-name: 'Test',
                    $dictionary-values: (
                        'top-start',
                    ),
                    $offset: 10px,
                    $is-controlled: true,
                    $has-arrow: true
                );
            }

            @include test.expect() {
                .Test[data-spirit-placement='top-start'] {
                    --test-offset: 10px;
                    --test-offset-orthogonal: 0;

                    transform-origin: bottom left;
                }

                .Test[data-spirit-placement='top-start'] > .Test__arrow {
                    transform-origin: center;
                    rotate: z 180deg;
                }
            }
        }
    }
}

@include test.describe('generate-sizes mixin') {
    @include test.it('should generate correct size classes based on a config') {
        @include test.assert() {
            @include test.output() {
                @include dictionaries.generate-sizes(
                    'TestSize',
                    (
                        large: (
                            width: 100px,
                            height: 200px,
                            padding-y: 12px,
                            padding-x: 16px,
                        ),
                    )
                );
            }

            @include test.expect() {
                .TestSize--large {
                    --spirit-test-size-width: 100px;
                    --spirit-test-size-height: 200px;
                    --spirit-test-size-padding-y: 12px;
                    --spirit-test-size-padding-x: 16px;
                }
            }
        }
    }
}
