"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RectangleItem = 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 useRectangleItem_1 = require("./useRectangleItem");
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 RectangleItem = ({ item, sectionId, onResize }) => {
    var _a, _b;
    const id = (0, react_1.useId)();
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const backgroundColor = (0, react_1.useMemo)(() => fillColor ? color_1.CntrlColor.parse(fillColor) : undefined, [fillColor]);
    const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    const [ref, setRef] = (0, react_1.useState)(null);
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
    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: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
                        ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
                        : {})) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .rectangle-${item.id} {
          position: absolute;
          width: 100%;
          height: 100%;
          border-style: solid;
          box-sizing: border-box;
        }
        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                        return (`
            .rectangle-${item.id} {
              background-color: ${color_1.CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
              border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
              border-radius: ${layoutParams.radius * 100}vw;
              border-width: ${layoutParams.strokeWidth * 100}vw;
              transform: rotate(${area.angle}deg);
              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
              backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
              -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
            }
            .rectangle-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
            }
          `);
                    })}
      ` })] }) }));
};
exports.RectangleItem = RectangleItem;
