"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Item_1 = require("../Item");
const style_1 = __importDefault(require("styled-jsx/style"));
const sdk_1 = require("@cntrl-site/sdk");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const LinkWrapper_1 = require("../LinkWrapper");
const useRegisterResize_1 = require("../../common/useRegisterResize");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const useItemAngle_1 = require("../useItemAngle");
const useGroupItem_1 = require("./useGroupItem");
const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
    var _a, _b;
    const id = (0, react_1.useId)();
    const { items } = item;
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const { opacity } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    const [ref, setRef] = (0, react_1.useState)(null);
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    return ((0, jsx_runtime_1.jsx)(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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .group-${item.id} {
          position: absolute;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }
        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                        return (`
            .group-${item.id} {
              opacity: ${layoutParams.opacity};
              transform: rotate(${area.angle}deg);
              transition: ${(0, HoverStyles_1.getTransitions)(['opacity', 'angle'], hoverParams)};
            }
            .group-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['opacity', 'angle'], hoverParams)};
            }
          `);
                    })}
      ` })] }) }));
};
exports.GroupItem = GroupItem;
