const assert = require('node:assert/strict');
const {callRenderer, html, assertPrettifiesTo} = require('../test-utils');

describe('services/koenig/node-renderers/image-renderer', function () {
    function getTestData(overrides = {}) {
        return {
            src: '/content/images/2022/11/koenig-lexical.jpg',
            width: 3840,
            height: 2160,
            href: '',
            title: 'This is a title',
            alt: 'This is some alt text',
            caption: 'This is a <b>caption</b>',
            ...overrides
        };
    }

    function getExportOptions() {
        return {
            imageOptimization: {
                contentImageSizes: {
                    w600: {width: 600},
                    w1000: {width: 1000},
                    w1600: {width: 1600},
                    w2400: {width: 2400}
                }
            },
            feature: {
                pictureImageFormats: true
            },
            canTransformImage: () => true
        };
    }

    function renderForWeb(data, options) {
        return callRenderer('image', data, {...getExportOptions(), ...options});
    }

    function renderForEmail(data, options) {
        return callRenderer('image', data, {...getExportOptions(), ...options, target: 'email'});
    }

    describe('web', function () {
        it('matches snapshot for default test data', function () {
            const result = renderForWeb(getTestData());

            assert.ok(result.html);

            assertPrettifiesTo(result.html, html`
                <figure class="kg-card kg-image-card kg-width-undefined kg-card-hascaption">
                    <picture>
                        <source
                            srcset="
                                /content/images/size/w600/format/avif/2022/11/koenig-lexical.jpg   600w,
                                /content/images/size/w1000/format/avif/2022/11/koenig-lexical.jpg 1000w,
                                /content/images/size/w1600/format/avif/2022/11/koenig-lexical.jpg 1600w,
                                /content/images/size/w2400/format/avif/2022/11/koenig-lexical.jpg 2400w
                            "
                            type="image/avif"
                            sizes="(min-width: 720px) 720px" />
                        <source
                            srcset="
                                /content/images/size/w600/format/webp/2022/11/koenig-lexical.jpg   600w,
                                /content/images/size/w1000/format/webp/2022/11/koenig-lexical.jpg 1000w,
                                /content/images/size/w1600/format/webp/2022/11/koenig-lexical.jpg 1600w,
                                /content/images/size/w2400/format/webp/2022/11/koenig-lexical.jpg 2400w
                            "
                            type="image/webp"
                            sizes="(min-width: 720px) 720px" />
                        <img
                            src="/content/images/2022/11/koenig-lexical.jpg"
                            class="kg-image"
                            alt="This is some alt text"
                            loading="lazy"
                            title="This is a title"
                            width="3840"
                            height="2160"
                            srcset="
                                /content/images/size/w600/2022/11/koenig-lexical.jpg   600w,
                                /content/images/size/w1000/2022/11/koenig-lexical.jpg 1000w,
                                /content/images/size/w1600/2022/11/koenig-lexical.jpg 1600w,
                                /content/images/size/w2400/2022/11/koenig-lexical.jpg 2400w
                            "
                            sizes="(min-width: 720px) 720px" />
                    </picture>
                    <figcaption>This is a<b>caption</b></figcaption>
                </figure>
            `);
        });

        it('renders with href', function () {
            const result = renderForWeb(getTestData({href: 'https://example.com'}));
            assert.ok(result.html.includes('<a href="https://example.com"'));
        });

        it('generates srcset for CDN image URLs when imageBaseUrl is configured', function () {
            const cdnUrl = 'https://cdn.example.com/c/uuid';
            const result = renderForWeb(
                getTestData({src: `${cdnUrl}/content/images/2022/11/koenig-lexical.jpg`}),
                {imageBaseUrl: cdnUrl}
            );

            assert.ok(result.html);

            assertPrettifiesTo(result.html, html`
                <figure class="kg-card kg-image-card kg-width-undefined kg-card-hascaption">
                    <picture>
                        <source
                            srcset="
                                ${cdnUrl}/content/images/size/w600/format/avif/2022/11/koenig-lexical.jpg   600w,
                                ${cdnUrl}/content/images/size/w1000/format/avif/2022/11/koenig-lexical.jpg 1000w,
                                ${cdnUrl}/content/images/size/w1600/format/avif/2022/11/koenig-lexical.jpg 1600w,
                                ${cdnUrl}/content/images/size/w2400/format/avif/2022/11/koenig-lexical.jpg 2400w
                            "
                            type="image/avif"
                            sizes="(min-width: 720px) 720px" />
                        <source
                            srcset="
                                ${cdnUrl}/content/images/size/w600/format/webp/2022/11/koenig-lexical.jpg   600w,
                                ${cdnUrl}/content/images/size/w1000/format/webp/2022/11/koenig-lexical.jpg 1000w,
                                ${cdnUrl}/content/images/size/w1600/format/webp/2022/11/koenig-lexical.jpg 1600w,
                                ${cdnUrl}/content/images/size/w2400/format/webp/2022/11/koenig-lexical.jpg 2400w
                            "
                            type="image/webp"
                            sizes="(min-width: 720px) 720px" />
                        <img
                            src="${cdnUrl}/content/images/2022/11/koenig-lexical.jpg"
                            class="kg-image"
                            alt="This is some alt text"
                            loading="lazy"
                            title="This is a title"
                            width="3840"
                            height="2160"
                            srcset="
                                ${cdnUrl}/content/images/size/w600/2022/11/koenig-lexical.jpg   600w,
                                ${cdnUrl}/content/images/size/w1000/2022/11/koenig-lexical.jpg 1000w,
                                ${cdnUrl}/content/images/size/w1600/2022/11/koenig-lexical.jpg 1600w,
                                ${cdnUrl}/content/images/size/w2400/2022/11/koenig-lexical.jpg 2400w
                            "
                            sizes="(min-width: 720px) 720px" />
                    </picture>
                    <figcaption>This is a<b>caption</b></figcaption>
                </figure>
            `);
        });

        it('does not generate srcset for CDN image URLs when imageBaseUrl is not configured', function () {
            const cdnUrl = 'https://cdn.example.com/c/uuid';
            const result = renderForWeb(
                getTestData({src: `${cdnUrl}/content/images/2022/11/koenig-lexical.jpg`})
            );

            assert.ok(result.html);
            assert.ok(!result.html.includes('srcset'));
        });

        it('does not render picture markup when labs flag is off', function () {
            const result = renderForWeb(getTestData(), {feature: {pictureImageFormats: false}});

            assert.ok(result.html);
            assert.ok(!result.html.includes('<picture>'));
            assert.ok(result.html.includes('<img'));
        });

        it('does not render picture markup for GIF images', function () {
            const result = renderForWeb(getTestData({src: '/content/images/2022/11/animated.gif'}));

            assert.ok(result.html);
            assert.ok(!result.html.includes('<picture>'));
            assert.ok(result.html.includes('<img'));
        });
    });

    describe('email', function () {
        it('matches snapshot for default test data', function () {
            const result = renderForEmail(getTestData());

            assert.ok(result.html);

            assertPrettifiesTo(result.html, html`
                <figure class="kg-card kg-image-card kg-width-undefined kg-card-hascaption">
                    <img
                        src="/content/images/size/w1600/2022/11/koenig-lexical.jpg"
                        class="kg-image"
                        alt="This is some alt text"
                        loading="lazy"
                        title="This is a title"
                        width="600"
                        height="338" />
                    <figcaption>This is a<b>caption</b></figcaption>
                </figure>
            `);
        });

        it('renders with href', function () {
            const result = renderForEmail(getTestData({href: 'https://example.com'}));
            assert.ok(result.html.includes('<a href="https://example.com"'));
        });

        it('uses retina src for CDN images in email', function () {
            const cdnUrl = 'https://cdn.example.com/c/uuid';
            const result = renderForEmail(
                getTestData({src: `${cdnUrl}/content/images/2022/11/koenig-lexical.jpg`}),
                {imageBaseUrl: cdnUrl}
            );

            assert.ok(result.html);
            assert.ok(result.html.includes(`${cdnUrl}/content/images/size/w1600/2022/11/koenig-lexical.jpg`));
        });
    });
});
