"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const sdk_1 = require("@cntrl-site/sdk");
const react_1 = require("react");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const style_1 = __importDefault(require("styled-jsx/style"));
const useRegisterResize_1 = require("../../common/useRegisterResize");
const useItemAngle_1 = require("../useItemAngle");
const CustomItem = ({ item, onResize, sectionId }) => {
    const sdk = (0, useCntrlContext_1.useCntrlContext)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const component = sdk.customItems.get(item.commonParams.name);
    const layoutValues = [item.area, item.state.hover];
    const [ref, setRef] = (0, react_1.useState)(null);
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    if (!component)
        return null;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hoverParams]) => {
                    return (`
            .custom-component-${item.id} {
              transform: rotate(${area.angle}deg);
              transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
              height: 100%;
              width: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }
            .custom-component-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)};
            }
          `);
                })}` })] }));
};
exports.CustomItem = CustomItem;
