// Text region rendering with font and color normalization.

var registry = window.pulsePlayerRegionTypes;

function getDefaultStyle() {
  return {
    font_family: 'Arial',
    font_size: 32,
    font_color: '#000000'
  };
}

function normalizeRenderableValue(value) {
  if (value && typeof value === 'object') {
    if (value.value !== undefined) {
      return value.value;
    }
    if (value.text !== undefined) {
      return value.text;
    }
    if (value.html !== undefined) {
      return value.html;
    }
    try {
      return JSON.stringify(value);
    } catch (_error) {
      return '';
    }
  }
  return value;
}

function renderTextRegion(region, regionContent) {
  var rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');
  if (!String(rawValue || '').trim()) {
    return '';
  }

  var defaultStyle = getDefaultStyle();
  var fontFamily = sanitizeFontFamily(regionContent.font_family || region.fontFamily || defaultStyle.font_family);
  var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize || defaultStyle.font_size);
  var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor || defaultStyle.font_color);
  var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;line-height:1.5;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
  var renderedBody = renderEditorJsContent(rawValue);
  return renderedBody ? '<div class="template-region text" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>' : '';
}

registry.register('text', {
  getDefaultStyle: getDefaultStyle,
  renderRegion: renderTextRegion
});