"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RichTextItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const color_1 = require("@cntrl-site/color");
const sdk_1 = require("@cntrl-site/sdk");
const style_1 = __importDefault(require("styled-jsx/style"));
const useRichTextItem_1 = require("./useRichTextItem");
const useCntrlContext_1 = require("../../provider/useCntrlContext");
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
const useRichTextItemValues_1 = require("./useRichTextItemValues");
const useRegisterResize_1 = require("../../common/useRegisterResize");
const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
const useExemplary_1 = require("../../common/useExemplary");
const useItemAngle_1 = require("../useItemAngle");
const RichTextItem = ({ item, sectionId, onResize }) => {
    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
    const id = (0, react_1.useId)();
    const [ref, setRef] = (0, react_1.useState)(null);
    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
    const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
    const textColor = (0, react_1.useMemo)(() => color ? color_1.CntrlColor.parse(color) : undefined, [color]);
    const layoutValues = [item.area, item.layoutParams, item.state.hover];
    const exemplary = (0, useExemplary_1.useExemplary)();
    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
                        const color = color_1.CntrlColor.parse(layoutParams.color);
                        return (`
            .rich-text-wrapper-${item.id} {
              font-size: ${layoutParams.fontSize * 100}vw;
              line-height: ${layoutParams.lineHeight * 100}vw;
              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
              word-spacing: ${layoutParams.wordSpacing * 100}vw;
              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
              font-weight: ${layoutParams.fontWeight};
              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
              vertical-align: ${layoutParams.verticalAlign};
              font-variant: ${layoutParams.fontVariant};
              color: ${color.fmt('rgba')};
              transform: rotate(${area.angle}deg);
              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
              text-transform: ${layoutParams.textTransform};
              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
            }
            .rich-text-wrapper-${item.id}:hover {
              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
            }
            @supports not (color: oklch(42% 0.3 90 / 1)) {
              .rich-text-wrapper-${item.id} {
                color: ${color.fmt('rgba')};
              }
            }
          `);
                    })}`] })] }));
};
exports.RichTextItem = RichTextItem;
