{% import 'utility.macros.njk' as utility %}
{% import 'item/annotation.macros.njk' as annotation %}
{% import 'item/macros.njk' as show %}


{#
  Show Previews
  -------------
  Call the requested previews with the appropriate JSON data.
#}
{% macro show_previews(data, item) %}
  {% if data and item -%}
    {%- set args = item.font or item.colors or item.ratios or item.sizes -%}
    {%- set key = args.key or item.context.origName or item.context.name -%}
    {%- if key -%}
      {%- if item.font and data.fonts[key] %}
        {{ font_specimen(key, data.fonts[key], item.iframed) }}
      {% endif -%}

      {%- if item.colors and data.colors[key] and item.iframed %}
        {{ colors(item.iframed) }}
      {% endif -%}

      {%- if item.ratios and data.ratios[key] and item.iframed %}
        {{ ratios(data.ratios[key], item.iframed) }}
      {% endif -%}

      {%- if item.sizes and data.sizes[key] and item.iframed %}
        {{ sizes(item.iframed) }}
      {%- endif -%}
    {%- endif -%}
  {%- endif %}
{% endmacro %}


{#
  Color Palette
  -------------
  Display color palettes based on JSON map output.
#}
{% macro color_palette(data) %}
  <div data-herman-color-palette>
    {% for value, items in data|list|groupby('value') %}
      <div data-herman-color-preview>
        <div data-herman-color-swatch>
          <div data-herman-transparency-grid></div>
          <div data-herman-color-overlay style="background-color: {{ value }};"></div>
        </div>
        <div data-herman-color-info>
          <strong data-herman-color-name data-herman-label="color">
            {%- for item in items -%}
              <span data-herman-color-name-option>{{ item.key }}{%- if not loop.last %},&nbsp;{% endif -%}</span>
            {%- endfor -%}
          </strong>
          {% set color = value|colors %}
          {% if color %}
            {% for format in ['hex', 'rgb', 'hsl'] %}
              {% if color[format] %}
                <code data-herman-code data-herman-color-value>{{ color[format] }}</code>
              {% endif %}
            {% endfor %}
          {% else %}
            <code data-herman-code data-herman-color-value>{{ value }}</code>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endmacro %}


{#
  Font Specimen
  -------------
  Display all font-family specimens,
  including multiple variants.

  @prop {String} name -
    Title for the font-family being displayed.
  @prop {Dict} data -
    All the available data on a given font,
    derived from the Sass JSON export.
  @prop {String} iframed -
    Rendered font specimen iframe content.
#}
{% macro font_specimen(name, data, iframed) %}
  {% set supplement = utility.link_if(data.name or name, data.source) %}
  {% set supplement = supplement + ' (' + name + ')' if (data.name and data.name != name) else supplement %}

  {% call show.item_section(
    slug='font-specimen',
    title='Font Preview',
    supplement=supplement
    ) %}

    {% if data.stack %}
      {% set name = data.name or name %}
      {% set family = [name, data.stack]|join(',') if not (name in data.stack) else data.stack %}
      {% set family = 'font-family: ' + font_names(family) + ';' %}
      {{ utility.code_block(language='css', content=family|safe) }}
    {% endif %}

    {% if iframed %}
      <iframe class="render-specimen" srcdoc="{{ iframed }}" width="100%" height="0"></iframe>
    {% endif %}
  {% endcall %}
{% endmacro %}



{#
  Specimen Variant
  ----------------
  Display a single specimen variant.

  @prop {Dict} variant -
    Parsed variant data (style, weight, formats, etc).
  @prop {Dict} data -
    Font-data from Sass map.
#}
{% macro specimen_variant(variant, data) %}
  {% set path = data[variant.variant] if data[variant.variant]|isString else '' -%}
  {%- set path = data[variant.variant].path or path -%}
  {%- set stack = data.stack if data.stack and not data.stack|isString else [data.stack] -%}
  {%- set family = [variant.family, stack]|join(',') if not (variant.family in stack) else stack -%}
  <div data-herman-fontface="{{ variant.variant }}">
    <p data-herman-label="font-name">
      {{ variant.variant }}
    </p>
    <div data-herman-font="sample" style="font-family: {{ font_names(family) }}; font-weight: {{ variant.weight }}; font-style: {{ variant.style }};">
      <div data-herman-font="aa">Aa</div>
      <div data-herman-font="lorem">{{ lorem('alpha') }}</div>
    </div>
    {% if path %}
    <p data-herman-label>
      <code data-herman-code>{{ path }}</code>
    </p>
    {% endif %}
  </div>
{% endmacro %}


{%- macro font_names(family) -%}
  {%- set family = family|split(',') if family|isString else family -%}
  {%- for name in family -%}
    {{ "'" + name + "'" if (' ' in name) else name }}
    {%- if not loop.last %}, {% endif -%}
  {%- endfor -%}
{%- endmacro -%}


{#
  Lorem
  -----
  Display Lorem Ipsum text for font specimens.

  @prop {'title' | 'body' | 'alpha'} length -
    They type of Lorem Ipsum to display:
    either title-length, paragraph-length,
    or a list of standard characters
    (uppercase, lowercase, numbers, and punctuation).
#}
{% macro lorem(length) %}
  {% if length == 'title' %}
    <span data-herman-lorem="title">
      Pack my box with five dozen liquor&nbsp;jugs.
    </span>
  {% elif length == 'body' %}
    <span data-herman-lorem="body">
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than&nbsp;now.
    </span>
  {% elif length == 'alpha' %}
    <span data-herman-lorem="uppercase">
      ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </span>
    <span data-herman-lorem="lowercase">
      abcdefghijklmnopqrstuvwxyz
    </span>
    <span data-herman-lorem="symbols">
      1234567890([{“‘,.;:?!$&*’”}])
    </span>
  {% endif %}
{% endmacro %}


{% macro ratios(data, iframed) %}
  {% for name, value in data %}
    {% if iframed and iframed[name] %}
      {% call show.item_section(
        slug='ratio-preview',
        title='Ratio',
        supplement=name + ' (' + value + ')'
      ) %}
        <iframe class="render-ratios" srcdoc="{{ iframed[name] }}" width="100%" height="0"></iframe>
      {% endcall %}
    {% endif %}
  {% endfor %}
{% endmacro %}


{% macro colors(iframed) %}
 {% call show.item_section('color-palette', 'Color Previews') %}
    <iframe class="render-colors" srcdoc="{{ iframed }}" width="100%" height="0"></iframe>
  {% endcall %}
{% endmacro %}


{% macro sizes(iframed) %}
  {% call show.item_section('size-preview', 'Size Previews') %}
    <iframe class="render-sizes" srcdoc="{{ iframed }}" width="100%" height="0"></iframe>
  {% endcall %}
{% endmacro %}


{% macro size_table(data, style) %}
  <table data-herman-table="size {{ style }}">
    <thead>
      <tr>
        <th data-herman-th="name">{{ 'Step' if (style == 'ratio') else 'Name' }}</th>
        <th data-herman-th="value">Value</th>
        <th data-herman-th="spacer" aria-hidden></th>
      </tr>
    </thead>

    <tbody>
    {% if (style == 'ratio') %}
      {% set value = data %}
      {% set start = 5 %}
      {% set count = range(1, 7) if (value == 'linear') else range(-3, 4) %}
      {% for step in count %}
        {% set result = (1 * step) if (value == 'linear') else (1 * (value ** step)) %}
        {% set width = (start * step) if (value == 'linear') else (start * (value ** step)) %}
        {% set width = width + 'em' %}

        {{ size_ruler_row(
          name='base' if ( result == 1 ) else step,
          value=result|round(2),
          width=width,
          highlight=true if ( result == 1 ) else false,
          compact=true
          ) }}
      {% endfor %}
    {% else %}
      {% for value, items in data|list|groupby('value') %}
        {% set name = items|join(', ', 'key') %}
          {{ size_ruler_row(
            name=name,
            value=value,
            width=value if ('ruler' in style) else none,
            text=value if (style == 'text') else none,
            compact=true if (style == 'ruler') else false
          ) }}
      {% endfor %}
    {% endif %}
    </tbody>
  </table>
{% endmacro %}


{% macro size_ruler_row(
  name,
  value,
  width=none,
  text=none,
  highlight=false,
  compact=false
) %}
  <tr data-herman-size="row{% if highlight %} highlight{% endif %}">
    <td data-herman-cell="name" data-herman-label>
      {{ name }}
    </td>
    <td data-herman-cell="value" data-herman-label>
      <code data-herman-code>
        {{ value }}
      </code>
    </td>
    {% if compact %}
      {{ size_ruler(value, width, text) }}
    {% else %}
      <td data-herman-cell data-herman-label></td>
    {% endif %}
  </tr>

  {% if (width or text) and not compact %}
    <tr data-herman-size="viz-row" aria-hidden="true">
      {{ size_ruler(value, width, text, 3) }}
    </tr>
  {% endif %}
{% endmacro %}


{% macro size_ruler(
  value,
  width=none,
  text=none,
  colspan=none
) %}
  {% if width or text %}
    <td aria-hidden data-herman-cell="viz" {% if colspan %}colspan="{{ colspan }}"{% endif %}>
      <div data-herman-size="overflow">
        {% if width %}
          {% if value in ['thin', 'thick', 'medium'] %}
            <div data-herman-viz="bar border" style="border-width: {{ width }};">
          {% else %}
            <div data-herman-viz="bar" style="width: {{ width }};">
          {% endif %}
          &nbsp;
        </div>
      {% elif text %}
        <div data-herman-viz="text" style="font-size: {{ value }};">
          {{ lorem('title') }}
        </div>
      {% endif %}
      </div>
    </td>
  {% endif %}
{% endmacro %}


{% macro icons(item) %}
  {% if item.icons and item.icons|length and item.iframed %}
    {% call show.item_section(
      slug='icon-preview',
      title='Icon Previews',
      supplement=item.iconsPath
    ) %}
      <iframe class="render-icons" srcdoc="{{ item.iframed }}" width="100%" height="0"></iframe>
    {% endcall %}
  {% endif %}
{% endmacro %}