"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.YoutubeEmbedItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const style_1 = __importDefault(require("styled-jsx/style"));
const LinkWrapper_1 = require("../LinkWrapper");
const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
const useItemAngle_1 = require("../useItemAngle");
const sdk_1 = require("@cntrl-site/sdk");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
const useRegisterResize_1 = require("../../common/useRegisterResize");
const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
    var _a, _b;
    const id = (0, react_1.useId)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const { play, controls, url } = item.commonParams;
    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
    const [div, setDiv] = (0, react_1.useState)(null);
    const [player, setPlayer] = (0, react_1.useState)(undefined);
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    (0, useRegisterResize_1.useRegisterResize)(div, onResize);
    (0, react_1.useEffect)(() => {
        const newUrl = new URL(url);
        const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
        if (!YT || !videoId || !div)
            return;
        const placeholder = document.createElement('div');
        div.appendChild(placeholder);
        const player = new YT.Player(placeholder, {
            videoId,
            playerVars: {
                autoplay: play === 'auto' ? '1' : '0',
                controls: controls ? '1' : '0'
            },
            events: {
                onReady: (event) => {
                    setPlayer(event.target);
                    if (play !== 'on-click') {
                        player.mute();
                    }
                }
            }
        });
        return () => {
            var _a;
            setPlayer(undefined);
            player.destroy();
            (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
        };
    }, [YT, div]);
    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-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                    if (!player || play !== 'on-hover')
                        return;
                    player.playVideo();
                }, onMouseLeave: () => {
                    if (!player || play !== 'on-hover')
                        return;
                    player.pauseVideo();
                }, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .embed-youtube-video-wrapper-${item.id},
        .embed-${item.id} {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        .embed-${item.id} {
          overflow: hidden;
        }
        .embed-youtube-video-wrapper-${item.id} iframe {
          width: 100%;
          height: 100%;
          z-index: 1;
          border: none;
        }
        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                    return (`
            .embed-youtube-video-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-youtube-video-wrapper-${item.id} .embed-${item.id} {
              border-radius: ${layoutParams.radius * 100}vw;
              transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
            }
            .embed-youtube-video-wrapper-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)};
            }
            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
            }
          `);
                })}
      ` })] }));
};
exports.YoutubeEmbedItem = YoutubeEmbedItem;
