"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageItem = 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 useImageFx_1 = require("../../utils/effects/useImageFx");
const useElementRect_1 = require("../../utils/useElementRect");
const useLayoutContext_1 = require("../useLayoutContext");
const baseVariables = `precision mediump float;
uniform sampler2D u_image;
uniform sampler2D u_pattern;
uniform vec2 u_imgDimensions;
uniform vec2 u_patternDimensions;
uniform float u_time;
uniform vec2 u_cursor;
varying vec2 v_texCoord;`;
const ImageItem = ({ item, sectionId, onResize }) => {
    var _a, _b, _c, _d, _e;
    const id = (0, react_1.useId)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
    const { radius, strokeWidth, opacity, strokeColor, 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);
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
    const fxCanvas = (0, react_1.useRef)(null);
    const isInitialRef = (0, react_1.useRef)(true);
    const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
    const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
        .join('\n');
    const controlValues = controls.reduce((acc, control) => {
        acc[control.shaderParam] = control.value;
        return acc;
    }, {});
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
    const area = layoutId ? item.area[layoutId] : null;
    const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
    const width = area && exemplary ? area.width * exemplary : 0;
    const height = area && exemplary ? area.height * exemplary : 0;
    (0, react_1.useEffect)(() => {
        isInitialRef.current = false;
    }, []);
    const isFXAllowed = (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
        imageUrl: url,
        fragmentShader: fullShaderCode,
        cursor: FXCursor,
        controls: controlValues
    }, width, height);
    const rect = (0, useElementRect_1.useElementRect)(ref);
    const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
    const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}));
    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-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: hasGLEffect && isFXAllowed ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .image-wrapper-${item.id} {
          position: absolute;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
        }
        .image {
          width: 100%;
          height: 100%;
          opacity: 1;
          object-fit: cover;
          pointer-events: none;
          border-style: solid;
          overflow: hidden;
          box-sizing: border-box;
        }
        .img-canvas {
          border: solid;
          width: 100%;
          height: 100%;
          pointer-events: none;
          border-width: 0;
          box-sizing: border-box;
        }
        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                        return (`
            .image-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)};
            }
            .image-wrapper-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
            }
            .image-${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)};
            }
            .image-wrapper-${item.id}:hover .image, .image-wrapper-${item.id}:hover .img-canvas {
              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
            }
          `);
                    })}
      ` })] }) }));
};
exports.ImageItem = ImageItem;
