"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VideoItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const style_1 = __importDefault(require("styled-jsx/style"));
const color_1 = require("@cntrl-site/color");
const sdk_1 = require("@cntrl-site/sdk");
const LinkWrapper_1 = require("../LinkWrapper");
const useFileItem_1 = require("./useFileItem");
const useItemAngle_1 = require("../useItemAngle");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const useRegisterResize_1 = require("../../common/useRegisterResize");
const useLayoutContext_1 = require("../useLayoutContext");
const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
const VideoItem = ({ item, sectionId, onResize }) => {
    var _a, _b;
    const id = (0, react_1.useId)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
    const [ref, setRef] = (0, react_1.useState)(null);
    const videoRef = (0, react_1.useRef)(null);
    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
    const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    const hasScrollPlayback = scrollPlayback !== null;
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
    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: `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)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .video-wrapper-${item.id} {
          position: absolute;
          overflow: hidden;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          opacity: ${opacity};
        }
        .video {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          opacity: 1;
          object-fit: cover;
          pointer-events: none;
          overflow: hidden;
          border-style: solid;
          pointer-events: auto;
        }
        .video-${item.id} {
          border-color: ${strokeColor};
        }
        .video-playback-wrapper {
          display: flex;
          justify-content: center;
        }
        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                    return (`
            .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', 'opacity', 'blur'], hoverParams)};
            }
            .video-wrapper-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
            }
            .video-${item.id} {
              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
              border-radius: ${layoutParams.radius * 100}vw;
              border-width: ${layoutParams.strokeWidth * 100}vw;
              transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
            }
            .video-wrapper-${item.id}:hover .video {
              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
            }
          `);
                })}
    ` })] }));
};
exports.VideoItem = VideoItem;
