"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VimeoEmbedItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const player_1 = __importDefault(require("@vimeo/player"));
const style_1 = __importDefault(require("styled-jsx/style"));
const LinkWrapper_1 = require("../LinkWrapper");
const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
const useItemAngle_1 = require("../useItemAngle");
const sdk_1 = require("@cntrl-site/sdk");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const useRegisterResize_1 = require("../../common/useRegisterResize");
const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
    var _a, _b;
    const id = (0, react_1.useId)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
    const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
    const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
    const [ref, setRef] = (0, react_1.useState)(null);
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    const getValidVimeoUrl = (url) => {
        const validURL = new URL(url);
        validURL.searchParams.append('controls', String(controls));
        validURL.searchParams.append('autoplay', String(play === 'auto'));
        validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
        validURL.searchParams.append('loop', String(loop));
        validURL.searchParams.append('pip', String(pictureInPicture));
        validURL.searchParams.append('title', '0');
        validURL.searchParams.append('byline', '0');
        validURL.searchParams.append('portrait', '0');
        validURL.searchParams.append('autopause', 'false');
        return validURL.href;
    };
    const validUrl = getValidVimeoUrl(url);
    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-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
                    if (!vimeoPlayer || play !== 'on-hover')
                        return;
                    vimeoPlayer.play();
                }, onMouseLeave: () => {
                    if (!vimeoPlayer || play !== 'on-hover')
                        return;
                    vimeoPlayer.pause();
                }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
      .embed-video-wrapper-${item.id} {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .embedVideo {
        width: 100%;
        height: 100%;
        z-index: 1;
        border: none;
        overflow: hidden;
      }
      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                    return (`
          .embed-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-video-wrapper-${item.id}:hover {
            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
          }
          .embed-video-wrapper-${item.id} .embedVideo {
            border-radius: ${layoutParams.radius * 100}vw;
            transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
          }
          .embed-video-wrapper-${item.id}:hover .embedVideo {
            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
          }
        `);
                })}
    ` })] }));
};
exports.VimeoEmbedItem = VimeoEmbedItem;
