import {
    htmlAbsoluteToRelative,
    htmlRelativeToAbsolute,
    htmlToTransformReady
} from '@tryghost/url-utils/lib/utils/index.js';
import nftCard from './embed/nft.js';
import twitterCard from './embed/twitter.js';
import type {Card} from '../types.js';

interface EmbedMetadata {
    thumbnail_url?: string;
    thumbnail_width: number;
    thumbnail_height: number;
}

const embedCard: Card = {
    name: 'embed',
    type: 'dom',

    render({payload, env: {dom}, options = {}}) {
        if (!payload.html && payload.type !== 'nft') {
            return dom.createTextNode('');
        }

        if (payload.type === 'twitter') {
            return twitterCard.render({payload, env: {dom}, options});
        }

        if (payload.metadata && payload.type === 'nft') {
            return nftCard.render({payload, env: {dom}, options});
        }

        const figure = dom.createElement('figure');
        figure.setAttribute('class', 'kg-card kg-embed-card');

        const metadata = payload.metadata as EmbedMetadata;
        const isVideoWithThumbnail = payload.type === 'video'
            && metadata
            && metadata.thumbnail_url;

        if (options.target === 'email' && isVideoWithThumbnail) {
            figure.setAttribute('class', 'kg-card kg-embed-card');

            const emailTemplateMaxWidth = 600;
            const thumbnailAspectRatio = metadata.thumbnail_width / metadata.thumbnail_height;
            const spacerWidth = Math.round(emailTemplateMaxWidth / 4);
            const spacerHeight = Math.round(emailTemplateMaxWidth / thumbnailAspectRatio);
            const html = `
                <!--[if !mso !vml]-->
                <a class="kg-video-preview" href="${payload.url}" aria-label="Play video" style="mso-hide: all">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%" background="${metadata.thumbnail_url}" role="presentation" style="background: url('${metadata.thumbnail_url}') left top / cover; mso-hide: all">
                        <tr style="mso-hide: all">
                            <td width="25%" style="visibility: hidden; mso-hide: all">
                                <img src="https://img.spacergif.org/v1/${spacerWidth}x${spacerHeight}/0a/spacer.png" alt="" width="100%" border="0" style="height: auto; opacity: 0; visibility: hidden; mso-hide: all;">
                            </td>
                            <td width="50%" align="center" valign="middle" style="vertical-align: middle; mso-hide: all;">
                                <div class="kg-video-play-button" style="mso-hide: all"><div style="mso-hide: all"></div></div>
                            </td>
                            <td width="25%" style="mso-hide: all">&nbsp;</td>
                        </tr>
                    </table>
                </a>
                <!--[endif]-->

                <!--[if vml]>
                <v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" coordsize="${emailTemplateMaxWidth},${spacerHeight}" coordorigin="0,0" href="${payload.url}" style="width:${emailTemplateMaxWidth}px;height:${spacerHeight}px;">
                    <v:rect fill="t" stroked="f" style="position:absolute;width:${emailTemplateMaxWidth};height:${spacerHeight};"><v:fill src="${metadata.thumbnail_url}" type="frame"/></v:rect>
                    <v:oval fill="t" strokecolor="white" strokeweight="4px" style="position:absolute;left:${Math.round((emailTemplateMaxWidth / 2) - 39)};top:${Math.round((spacerHeight / 2) - 39)};width:78;height:78"><v:fill color="black" opacity="30%" /></v:oval>
                    <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="white" stroked="f" style="position:absolute;left:${Math.round((emailTemplateMaxWidth / 2) - 11)};top:${Math.round((spacerHeight / 2) - 17)};width:30;height:34;" />
                </v:group>
                <![endif]-->

            `;
            figure.appendChild(dom.createRawHTMLSection(html));
        } else {
            figure.appendChild(dom.createRawHTMLSection(payload.html as string));
        }

        if (payload.caption) {
            const figcaption = dom.createElement('figcaption');
            figcaption.appendChild(dom.createRawHTMLSection(payload.caption as string));
            figure.appendChild(figcaption);
            figure.setAttribute('class', `${figure.getAttribute('class')} kg-card-hascaption`);
        }

        return figure;
    },

    absoluteToRelative(payload, options) {
        payload.caption = payload.caption && htmlAbsoluteToRelative(payload.caption as string, options.siteUrl, options);
        return payload;
    },

    relativeToAbsolute(payload, options) {
        payload.caption = payload.caption && htmlRelativeToAbsolute(payload.caption as string, options.siteUrl, options.itemUrl ?? '', options);
        return payload;
    },

    toTransformReady(payload, options) {
        payload.html = payload.html && htmlToTransformReady(payload.html as string, options.siteUrl, options);
        return payload;
    }
};

export default embedCard;
