<wxs module="fmt">
function textAlign(align) {
  if (align === "left") return "left"
  if (align === "center") return "center"
  if (align === "right") return "right"
  return "left"
}
module.exports = { textAlign: textAlign }
</wxs>

<template name="md-inline">
  <block wx:for="{{nodes}}" wx:key="index" wx:for-item="node">
    <text
      wx:if="{{node.type === 'text' && node.href}}"
      class="md-text md-link {{node.bold ? 'md-bold' : ''}} {{node.italic ? 'md-italic' : ''}} {{node.strike ? 'md-strike' : ''}}"
      catchtap="onLinkTap"
      data-href="{{node.href}}"
    >{{node.content}}</text>
    <text
      wx:elif="{{node.type === 'text'}}"
      class="md-text {{node.bold ? 'md-bold' : ''}} {{node.italic ? 'md-italic' : ''}} {{node.strike ? 'md-strike' : ''}}"
    >{{node.content}}</text>
    <text wx:elif="{{node.type === 'code' && node.href}}" class="md-code md-link" catchtap="onLinkTap" data-href="{{node.href}}">{{node.content}}</text>
    <text wx:elif="{{node.type === 'code'}}" class="md-code">{{node.content}}</text>
    <text
      wx:elif="{{node.type === 'mention'}}"
      class="md-mention"
      catchtap="onMentionTap"
      data-ref="{{node.ref}}"
      data-mention-type="{{node.mentionType}}"
      data-mention-id="{{node.mentionId}}"
      data-mention-disabled="{{node.mentionDisabled}}"
    >{{node.ref}}</text>
    <text wx:elif="{{node.type === 'br'}}" class="md-br">\n</text>
    <view
      wx:elif="{{node.type === 'image' && node.attachmentId}}"
      class="md-attachment-image"
      catchtap="onAttachmentImageTap"
      data-attachment-id="{{node.attachmentId}}"
    >
      <image
        wx:if="{{node.src}}"
        class="md-attachment-image__content"
        src="{{node.src}}"
        mode="widthFix"
        style="{{imageWidthLimits[node.attachmentId] ? 'width: ' + imageWidthLimits[node.attachmentId] + 'rpx;' : ''}}"
        data-attachment-id="{{node.attachmentId}}"
        bindload="onAttachmentImageLoad"
      />
      <view wx:else class="md-attachment-image__placeholder">
        <text class="md-attachment-image__label">{{node.alt}}</text>
      </view>
    </view>
    <image wx:elif="{{node.type === 'image'}}" class="md-image" src="{{node.src}}" mode="widthFix" lazy-load="{{true}}" catchtap="onImageTap" data-src="{{node.src}}" />
  </block>
</template>

<template name="md-block">
  <view wx:if="{{block.type === 'heading'}}" class="md-heading md-heading--{{block.level}}">
    <template is="md-inline" data="{{nodes: block.children, imageWidthLimits: imageWidthLimits}}" />
  </view>

  <view wx:elif="{{block.type === 'paragraph'}}" class="md-paragraph">
    <template is="md-inline" data="{{nodes: block.children, imageWidthLimits: imageWidthLimits}}" />
  </view>

  <view wx:elif="{{block.type === 'code'}}" class="md-code-block">
    <text class="md-code-block-text" user-select="{{true}}">{{block.content}}</text>
  </view>

  <view wx:elif="{{block.type === 'blockquote'}}" class="md-blockquote">
    <template is="md-inline" data="{{nodes: block.inlineChildren, imageWidthLimits: imageWidthLimits}}" />
  </view>

  <view wx:elif="{{block.type === 'ul'}}" class="md-list">
    <view wx:for="{{block.items}}" wx:key="index" wx:for-item="item" wx:for-index="idx" class="md-list-item">
      <text class="md-list-marker">•</text>
      <view class="md-list-content">
        <template is="md-inline" data="{{nodes: item, imageWidthLimits: imageWidthLimits}}" />
      </view>
    </view>
  </view>

  <view wx:elif="{{block.type === 'ol'}}" class="md-list md-list--ordered">
    <view wx:for="{{block.items}}" wx:key="index" wx:for-item="item" wx:for-index="idx" class="md-list-item">
      <text class="md-list-marker">{{block.start + idx}}.</text>
      <view class="md-list-content">
        <template is="md-inline" data="{{nodes: item, imageWidthLimits: imageWidthLimits}}" />
      </view>
    </view>
  </view>

  <view wx:elif="{{block.type === 'hr'}}" class="md-hr" />

  <view wx:elif="{{block.type === 'table'}}" class="md-table-wrap">
    <view class="md-table">
      <view class="md-table-row md-table-row--header">
        <view
          wx:for="{{block.header}}"
          wx:key="index"
          wx:for-item="cell"
          wx:for-index="ci"
          class="md-table-cell md-table-cell--header"
          style="text-align: {{fmt.textAlign(block.aligns[ci])}};"
        >
          <template is="md-inline" data="{{nodes: cell, imageWidthLimits: imageWidthLimits}}" />
        </view>
      </view>
      <view wx:for="{{block.rows}}" wx:key="index" wx:for-item="row" wx:for-index="ri" class="md-table-row">
        <view
          wx:for="{{row}}"
          wx:key="index"
          wx:for-item="cell"
          wx:for-index="ci"
          class="md-table-cell"
          style="text-align: {{fmt.textAlign(block.aligns[ci])}};"
        >
          <template is="md-inline" data="{{nodes: cell, imageWidthLimits: imageWidthLimits}}" />
        </view>
      </view>
    </view>
  </view>
</template>

<view class="md-root {{tone === 'muted' ? 'md-root--muted' : ''}} {{collapsed ? 'md-root--collapsed' : ''}}">
  <view class="md-content" style="{{collapsed ? 'max-height: ' + (collapsedMaxLines * 1.5) + 'rem;' : ''}}">
    <block wx:for="{{blocks}}" wx:key="index" wx:for-item="blockItem">
      <template is="md-block" data="{{block: blockItem, imageWidthLimits: attachmentImageWidthLimits}}" />
    </block>
  </view>
  <view wx:if="{{collapsible}}" class="md-collapse-toggle" catchtap="onToggleCollapse">
    <text class="md-collapse-toggle__label">{{collapsed ? expandLabel : collapseLabel}}</text>
    <view class="md-collapse-toggle__icon icon icon--sm {{collapsed ? 'icon--chevron-down' : 'icon--chevron-up'}}"></view>
  </view>
</view>
