"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeEmbedItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const sdk_1 = require("@cntrl-site/sdk");
const react_1 = require("react");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const style_1 = __importDefault(require("styled-jsx/style"));
const useRegisterResize_1 = require("../../common/useRegisterResize");
const useItemAngle_1 = require("../useItemAngle");
const LinkWrapper_1 = require("../LinkWrapper");
const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
const stylesMap = {
    [sdk_1.AreaAnchor.TopLeft]: {},
    [sdk_1.AreaAnchor.TopCenter]: { justifyContent: 'center' },
    [sdk_1.AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
    [sdk_1.AreaAnchor.MiddleLeft]: { alignItems: 'center' },
    [sdk_1.AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
    [sdk_1.AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
    [sdk_1.AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
    [sdk_1.AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
    [sdk_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
};
const CodeEmbedItem = ({ item, sectionId, onResize }) => {
    var _a, _b;
    const id = (0, react_1.useId)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const { anchor, blur, opacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const { html } = item.commonParams;
    const [ref, setRef] = (0, react_1.useState)(null);
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    const pos = stylesMap[anchor];
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    (0, react_1.useEffect)(() => {
        if (!ref)
            return;
        const scripts = ref.querySelectorAll('script');
        for (const script of scripts) {
            const newScript = document.createElement('script');
            for (const attr of script.getAttributeNames()) {
                newScript.setAttribute(attr, script.getAttribute(attr));
            }
            newScript.textContent = script.textContent;
            script.parentNode.removeChild(script);
            ref.appendChild(newScript);
        }
    }, [item.commonParams.html]);
    (0, react_1.useEffect)(() => {
        if (!ref)
            return;
        const iframe = ref.querySelector(`[data-embed="${item.id}"]`);
        if (!iframe)
            return;
        iframe.srcdoc = item.commonParams.html;
    }, [item.commonParams.html, item.commonParams.iframe, ref]);
    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
      .embed-wrapper-${item.id} {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .embed-${item.id} {
        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
        transform-origin: top left;
        z-index: 1;
        border: none;
      }
      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
                    return (`
          .embed-wrapper-${item.id} {
            opacity: ${layoutParams.opacity};
            transform: rotate(${area.angle}deg);
            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
          }
          .embed-${item.id} {
            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
          }
          .embed-wrapper-${item.id}:hover {
            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
          }
        `);
                })}
    ` })] }));
};
exports.CodeEmbedItem = CodeEmbedItem;
