<%_
assetPath = htmlWebpackPlugin.options.assetPath
css = htmlWebpackPlugin.files.css
_%>

<%%_ const renderTokens = (tokens, config) => { _%%>
  <%%_
    const allThemeIds = themes.map(theme => theme.id)
    const displayAllThemes = themeId === '_all'
    const type = ((tokens && tokens[0].type) || 'default').split('/')[0]
    const isCategory = !!(type === 'category' && tokens && tokens.length)
    const isTokenThemes = !!(tokens && tokens[0].themes)
    const level = config.level
    const renderConfig = { level: level + 1, layout: config.layout }
    const displayItem = item => !!(displayAllThemes || !item.themeIds || item.themeIds.includes(themeId))
    const visualizable = element => ['size', 'color', 'box-shadow', 'border-width', 'border-style', 'border-radius', 'opacity'].includes(element.type)
    const haveProperty = property => element => element[property]
    const haveThemeProperty = property => element => element.themes && Object.values(element.themes).some(haveProperty(property))
  _%%>

  <%%_ if (isCategory) { _%%>
    <%%_ Object.values(tokens).forEach(category => { if (displayItem(category)) { _%%>
      <section class="uie-tokens__category" id="<%%= category.id || helpers.dasherize(category.name) %%>">
        <%%_ if (category.name) { _%%>
          <h<%%= renderConfig.level %%> class="uie-tokens__title"><%%= category.name %%></h<%%= renderConfig.level %%>>
        <%%_ } _%%>
        <%%_ renderConfig.layout = category.layout _%%>
        <%%= renderTokens(category.tokens, renderConfig) _%%>
      </section>
    <%%_ } }) _%%>

  <%%_ } else if (isTokenThemes) { _%%>
    <%%_
      const columns = {
        visualization: tokens.some(visualizable),
        description: tokens.some(haveProperty('description')),
        variable: tokens.some(haveThemeProperty('variable')),
        reference: tokens.some(haveThemeProperty('reference')),
        default: tokens.some(haveThemeProperty('default'))
      }
      const themeTitle = (themeId) => {
        const theme = themes.find(theme => theme.id === themeId)
        return theme && theme.title ? theme.title : themeId
      }
    _%%>

    <div class="uie-table-wrapper">
    <table class="uie-tokens__container uie-tokens__container--theme">
      <thead>
        <tr>
          <th class="uie-theme-token__label uie-theme-token__label--name">
            <%%= helpers.localize(lang, 'token.property') %%>
          </th>
          <%%_ if (columns.description) { _%%>
            <th class="uie-theme-token__label uie-theme-token__label--description"><%%= helpers.localize(lang, 'token.description') %%></th>
          <%%_ } _%%>
          <%%_ if (displayAllThemes) { _%%>
            <th class="uie-theme-token__label uie-theme-token__label--theme">
              <%%= helpers.localize(lang, 'token.theme') %%>
            </th>
          <%%_ } _%%>
          <th class="uie-theme-token__label uie-theme-token__label--value">
            <%%= helpers.localize(lang, 'token.value') %%>
          </th>
          <%%_ if (columns.variable) { _%%>
            <th class="uie-theme-token__label uie-theme-token__label--variable"><%%= helpers.localize(lang, 'token.variable') %%></th>
          <%%_ } _%%>
          <%%_ if (columns.visualization) { _%%>
            <th class="uie-theme-token__label uie-theme-token__label--visualization"></th>
          <%%_ } _%%>
          <%%_ if (columns.reference) { _%%>
            <th class="uie-theme-token__label uie-theme-token__label--reference"><%%= helpers.localize(lang, 'token.reference') %%></th>
          <%%_ } _%%>
          <%%_ if (columns.default) { _%%>
            <th class="uie-theme-token__label uie-theme-token__label--default"><%%= helpers.localize(lang, 'token.default') %%></th>
          <%%_ } _%%>
        </tr>
      </thead>
      <tbody>
        <%%_ Object.values(tokens).forEach(token => { if (displayItem(token)) { _%%>
          <%%_ const displayedThemeIds = displayAllThemes ? allThemeIds /* Object.keys(token.themes) */ : [themeId] _%%>
          <%%_ const rowspan = Object.keys(displayedThemeIds).length _%%>
          <%%_ displayedThemeIds.forEach((rowThemeId, index) => { _%%>
            <%%_ const property = token.themes[rowThemeId] _%%>
            <tr class="uie-theme-token">
              <%%_ if (index === 0) { _%%>
                <td
                  class="uie-theme-token__value uie-theme-token__value--property uie-rowspan-right"
                  rowspan="<%%= rowspan %%>"
                >
                  <div><%%= token.name %%></div>
                  <%%_ if (token.variable) { _%%>
                    <code class="uie-theme-token__variablename"><%%= token.variable %%></code>
                  <%%_ } _%%>
                </td>
                <%%_ if (columns.description) { _%%>
                  <td
                    class="uie-theme-token__value uie-theme-token__value--description uie-rowspan-right"
                    rowspan="<%%= rowspan %%>"
                  >
                    <%%= token.description %%>
                  </td>
                <%%_ } _%%>
              <%%_ } _%%>
              <%%_ if (displayAllThemes) { _%%>
                <td class="uie-theme-token__value uie-theme-token__value--theme uie-rowspan-left">
                  <%%= themeTitle(rowThemeId) %%>
                </td>
              <%%_ } _%%>
              <td class="uie-theme-token__value uie-theme-token__value--value">
                <%%= property && property.value %%>
              </td>
              <%%_ if (columns.variable) { _%%>
                <td class="uie-theme-token__value uie-theme-token__value--variable"><code><%%= property && property.variable %%></code></td>
              <%%_ } _%%>
              <%%_ if (columns.visualization) { _%%>
                <td class="uie-theme-token__value uie-theme-token__value--visualization">
                  <%%_ if (property) { _%%>
                    <%%_ if (token.type === 'size') { _%%>
                      <span class="uie-theme-token__size" style="--value: <%%= property.value %%>; width:<%%= property.value %%>; height:<%%= property.value %%>"></span>
                    <%%_ } else if (token.type === 'color') { _%%>
                      <span class="uie-theme-token__swatch">
                        <span class="uie-theme-token__swatch__inner" style="background-color:<%%= property.value %%>"></span>
                      </span>
                    <%%_ } else if (token.type === 'box-shadow') { _%%>
                      <span class="uie-shadow-token" style="box-shadow: <%%= property.value %%>"></span>
                    <%%_ } else if (token.type === 'border-width') { _%%>
                      <span class="uie-border-token" style="border-width: <%%= property.value %%>"></span>
                    <%%_ } else if (token.type === 'border-style') { _%%>
                      <span class="uie-border-token" style="border-width: 2px; border-style: <%%= property.value %%>"></span>
                    <%%_ } else if (token.type === 'border-radius') { _%%>
                      <span class="uie-border-token" style="border-radius: <%%= property.value %%>"></span>
                    <%%_ } else if (token.type === 'opacity') { _%%>
                      <span class="uie-opacity-token">
                        <span class="uie-opacity-token__inner" style="opacity: <%%= property.value %%>"></span>
                      </span>
                    <%%_ } _%%>
                  <%%_ } _%%>
                </td>
              <%%_ } _%%>
              <%%_ if (columns.reference) { _%%>
                <td class="uie-theme-token__value uie-theme-token__value--reference"><%%= property && property.reference %%></td>
              <%%_ } _%%>
              <%%_ if (columns.default) { _%%>
                <td class="uie-theme-token__value uie-theme-token__value--default"><%%= property && property.default ? '*' : '' %%></td>
              <%%_ } _%%>
            </tr>
          <%%_ }) _%%>
        <%%_ } }) _%%>
      </tbody>
    </table>
  </div>

  <%%_ } else if (type === 'color') { _%%>
    <div class="uie-tokens__container uie-tokens__container--<%%= type %%>">
      <%%_ Object.values(tokens).forEach(token => { if (displayItem(token)) { _%%>
        <%%_ const color = helpers.color(token.value) _%%>
        <dl class="uie-color-token" id="<%%= helpers.dasherize(token.name) %%>">
          <div class="uie-color-token__info uie-color-token__info--top">
            <div class="uie-color-token__example">
              <div class="uie-color-token__swatch">
                <div class="uie-color-token__swatch__inner" style="background:<%%= helpers.colorDefinition(color) %%>"></div>
              </div>
            </div>
            <div class="uie-color-token__name"><%%= token.name %%></div>
          </div>
          <%% if (token.description) { %%>
            <div class="uie-color-token__info">
              <dt class="uie-color-token__label"><%%= helpers.localize(lang, 'token.description') %%></dt>
              <dd class="uie-color-token__value"><%%= token.description %%></dd>
            </div>
          <%% } %%>
          <%% if (token.variable) { %%>
            <div class="uie-color-token__info">
              <dt class="uie-color-token__label"><%%= helpers.localize(lang, 'token.variable') %%></dt>
              <dd class="uie-color-token__value uie-color-token__value--code"><code><%%= token.variable %%></code></dd>
            </div>
          <%% } %%>
          <%# if this color references another color only display the reference, otherwise the values %>
          <%% if (token.reference) { %%>
            <div class="uie-color-token__info">
              <dt class="uie-color-token__label"><%%= helpers.localize(lang, 'token.reference') %%></dt>
              <dd class="uie-color-token__value"><%%= token.reference %%></dd>
            </div>
          <%% } else if (token.value) { %%>
            <div class="uie-color-token__info">
              <dt class="uie-color-token__label">HEX</dt>
              <dd class="uie-color-token__value uie-color-token__value--code"><code><%%= color.hex %%></code></dd>
            </div>
            <div class="uie-color-token__info">
              <dt class="uie-color-token__label">RGB</dt>
              <dd class="uie-color-token__value uie-color-token__value--code"><code><%%= color.rgb %%></code></dd>
            </div>
            <div class="uie-color-token__info">
              <dt class="uie-color-token__label">HSL</dt>
              <dd class="uie-color-token__value uie-color-token__value--code"><code><%%= color.hsl %%></code></dd>
            </div>
          <%% } %%>
        </dl>
      <%%_ } }) _%%>
    </div>

  <%%_ } else if (type === 'font') { _%%>
    <div class="uie-tokens__container uie-tokens__container--<%%= type %%>">
      <%%_ Object.values(tokens).forEach(token => { if (displayItem(token)) { _%%>
        <dl class="uie-font-token"<%% if (token.name) { %%> id="<%%= helpers.dasherize(token.name) %%>"<%% } %%>>
          <%% if (token.name) { %%>
            <div class="uie-font-token__info">
              <dt class="uie-font-token__label"><%%= helpers.localize(lang, 'token.fontface') %%></dt>
              <dd class="uie-font-token__value"><%%= token.name %%></dd>
            </div>
          <%% } %%>
          <%% if (token.fontweight) { %%>
            <div class="uie-font-token__info" >
              <dt class="uie-font-token__label"><%%= helpers.localize(lang, 'token.fontweight') %%></dt>
              <dd class="uie-font-token__value"><%%= token.fontweight %%></dd>
            </div>
          <%% } %%>
          <%% if (token.variable) { %%>
            <div class="uie-font-token__info">
              <dt class="uie-font-token__label"><%%= helpers.localize(lang, 'token.variable') %%></dt>
              <dd class="uie-font-token__value uie-color-token__value--code"><code><%%= token.variable %%></code></dd>
            </div>
          <%% } %%>
          <div class="uie-font-token__info uie-font-token__info--example">
            <dt class="uie-font-token__label"><%%= helpers.localize(lang, 'token.demo') %%></dt>
            <dd class="uie-font-token__value">
              <p class="uie-font-token__example" style="<%%= token.value %%>">
                A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ü Ä Ö<br />
                a b c d e f g h i j k l m n o p q r s t u v w x y z ü ä ö ß<br />
                1 2 3 4 5 6 7 8 9 0 & @ . , ? ! ’ “ ” ( ) × € $ ‹ › „ “
              </p>
            </dd>
          </div>
          <%% if (token.sizes) { %%>
            <%%_ Object.values(token.sizes).forEach(size => { _%%>
              <div class="uie-font-token__info uie-font-token__info--example">
                <dt class="uie-font-token__label"><%%= size %%></dt>
                <dd class="uie-font-token__value">
                  <p class="uie-font-token__example" style="<%%= token.value %%>;font-size:<%%= size %%> !important;">
                    <%%= token.text || 'The quick brown fox jumps over the lazy dog' %%>
                  </p>
                </dd>
              </div>
            <%%_ }) _%%>
          <%% } else { %%>
            <div class="uie-font-token__info uie-font-token__info--example">
              <dt class="uie-font-token__label">&nbsp;</dt>
              <dd class="uie-font-token__value">
                <p class="uie-font-token__example" style="<%%= token.value %%>">
                  <%%= token.text || 'The quick brown fox jumps over the lazy dog' %%>
                </p>
              </dd>
            </div>
          <%% } %%>
          <%% if (token.description) { %%>
            <div class="uie-font-token__info">
              <dt class="uie-font-token__label"><%%= helpers.localize(lang, 'token.description') %%></dt>
              <dd class="uie-font-token__value"><%%= token.description %%></dd>
            </div>
          <%% } %%>
          <%% if (token.license) { %%>
            <div class="uie-font-token__info" >
              <dt class="uie-font-token__label"><%%= helpers.localize(lang, 'token.license') %%></dt>
              <dd class="uie-font-token__value"><%%= token.license %%></dd>
            </div>
          <%% } %%>
        </dl>
      <%%_ } }) _%%>
    </div>

  <%%_ } else if (type === 'icon') { _%%>
    <%% if (renderConfig.layout === 'table') { %%>
      <%%_
        const columns = {
          variable: tokens.some(haveProperty('variable')),
          reference: tokens.some(haveProperty('reference')),
          description: tokens.some(haveProperty('description'))
        }
      _%%>
      <div class="uie-table-wrapper">
        <table class="uie-tokens__container uie-tokens__container--icon">
          <thead>
            <tr>
              <th class="uie-icon-token__label uie-icon-token__label--icon"><%%= helpers.localize(lang, 'token.icon') %%></th>
              <th class="uie-icon-token__label uie-icon-token__label--name"><%%= helpers.localize(lang, 'token.name') %%></th>
              <th class="uie-icon-token__label uie-icon-token__label--value"><%%= helpers.localize(lang, 'token.usage') %%></th>
              <%%_ if (columns.variable) { _%%>
                <th class="uie-icon-token__label uie-icon-token__label--variable"><%%= helpers.localize(lang, 'token.variable') %%></th>
              <%%_ } _%%>
              <%%_ if (columns.description) { _%%>
                <th class="uie-icon-token__label uie-icon-token__label--description"><%%= helpers.localize(lang, 'token.description') %%></th>
              <%%_ } _%%>
              <%%_ if (columns.reference) { _%%>
                <th class="uie-icon-token__label uie-icon-token__label--reference"><%%= helpers.localize(lang, 'token.reference') %%></th>
              <%%_ } _%%>
            </tr>
          </thead>
          <tbody>
            <%%_ Object.values(tokens).forEach(token => { if (displayItem(token)) { _%%>
              <tr class="uie-icon-token">
                <td class="uie-icon-token__value uie-icon-token__value--icon"><%%- token.value %%></td>
                <td class="uie-icon-token__value"><%%= token.name %%></td>
                <td class="uie-icon-token__value uie-icon-token__value--value"><code><%%= token.usage || token.value %%></code></td>
                <%% if (columns.variable) { %%>
                  <td class="uie-icon-token__value uie-icon-token__value--variable"><code><%%= token.variable %%></code></td>
                <%% } %%>
                <%% if (columns.description) { %%>
                  <td class="uie-icon-token__value uie-icon-token__value--description"><%%= token.description %%></td>
                <%% } %%>
                <%% if (columns.reference) { %%>
                  <td class="uie-icon-token__value uie-icon-token__value--reference"><%%= token.reference %%></td>
                <%% } %%>
              </tr>
            <%%_ } }) _%%>
          </tbody>
        </table>
      </div>
    <%%_ } else { _%%>
      <div class="uie-tokens__grid">
        <%%_ Object.values(tokens).forEach(token => { if (displayItem(token)) { _%%>
          <figure class="uie-icon-token">
            <div class="uie-icon-token__icon">
              <%%- token.value %%>
            </div>
            <figcaption class="uie-icon-token__name">
              <%%= token.name %%>
            </figcaption>
          </figure>
        <%%_ } }) _%%>
      </div>
    <%%_ } _%%>
  <%%_ } else { _%%>
    <%%_
      const columns = {
        visualization: tokens.some(visualizable),
        variable: tokens.some(haveProperty('variable')),
        reference: tokens.some(haveProperty('reference')),
        description: tokens.some(haveProperty('description'))
      }
    _%%>
    <div class="uie-table-wrapper">
    <table class="uie-tokens__container uie-tokens__container--default">
      <thead>
        <tr>
          <th class="uie-default-token__label uie-default-token__label--name"><%%= helpers.localize(lang, 'token.name') %%></th>
          <th class="uie-default-token__label uie-default-token__label--value"><%%= helpers.localize(lang, 'token.value') %%></th>
          <%%_ if (columns.variable) { _%%>
            <th class="uie-default-token__label uie-default-token__label--variable"><%%= helpers.localize(lang, 'token.variable') %%></th>
          <%%_ } _%%>
          <%%_ if (columns.visualization) { _%%>
            <th class="uie-default-token__label uie-default-token__label--visualization"></th>
          <%%_ } _%%>
          <%%_ if (columns.description) { _%%>
            <th class="uie-default-token__label uie-default-token__label--description"><%%= helpers.localize(lang, 'token.description') %%></th>
          <%%_ } _%%>
          <%%_ if (columns.reference) { _%%>
            <th class="uie-default-token__label uie-default-token__label--reference"><%%= helpers.localize(lang, 'token.reference') %%></th>
          <%%_ } _%%>
        </tr>
      </thead>
      <tbody>
        <%%_ Object.values(tokens).forEach(token => { if (displayItem(token)) { _%%>
          <tr class="uie-default-token">
            <td class="uie-default-token__value"><%%= token.name %%></td>
            <td class="uie-default-token__value uie-default-token__value--value"><%%= token.value %%></td>
            <%% if (columns.variable) { %%>
              <td class="uie-default-token__value uie-default-token__value--variable"><code><%%= token.variable %%></code></td>
            <%% } %%>
            <%% if (columns.visualization) { %%>
              <td class="uie-default-token__value uie-default-token__value--visualization">
                <%%_ if (type === 'size') { _%%>
                  <span class="uie-size-token__size" style="width:<%%= token.value %%>; height:<%%= token.value %%>"></span>
                <%%_ } else if (token.type === 'box-shadow') { _%%>
                  <span class="uie-shadow-token" style="box-shadow: <%%= token.value %%>"></span>
                <%%_ } else if (token.type === 'border-width') { _%%>
                  <span class="uie-border-token" style="border-width: <%%= token.value %%>"></span>
                <%%_ } else if (token.type === 'border-style') { _%%>
                  <span class="uie-border-token" style="border-width: 2px; border-style: <%%= token.value %%>"></span>
                <%%_ } else if (token.type === 'border-radius') { _%%>
                  <span class="uie-border-token" style="border-radius: <%%= token.value %%>"></span>
                <%%_ } else if (token.type === 'opacity') { _%%>
                  <span class="uie-opacity-token">
                    <span class="uie-opacity-token__inner" style="opacity: <%%= token.value %%>"></span>
                  </span>
                <%%_ } _%%>
              </td>
            <%% } %%>
            <%% if (columns.description) { %%>
              <td class="uie-default-token__value uie-default-token__value--description"><%%= token.description %%></td>
            <%% } %%>
            <%% if (columns.reference) { %%>
              <td class="uie-default-token__value uie-default-token__value--reference"><%%= token.reference %%></td>
            <%% } %%>
          </tr>
        <%%_ } }) _%%>
      </tbody>
    </table>
    </div>
  <%%_ } _%%>
<%%_ } _%%>

<%_ for (index in css) { _%>
<link href="<%- assetPath(css[index]) %>" rel="stylesheet">
<%_ } _%>

<div class="uie">
  <div class="uie-tokens">
    <%%_ if (tokens) { %%>
      <%%= renderTokens(tokens, { level: 1 }) _%%>
    <%%_ } _%%>
  </div>
</div>
