{% from "_macros/shared/vf_dedent.jinja" import vf_dedent %}
{% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
{% from "_macros/shared/vf_description-block.jinja" import vf_description_block %}
{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
{% from "_macros/shared/vf_linked-logo-block.jinja" import vf_linked_logo_block %}
{% from "_macros/shared/vf_logo-block.jinja" import vf_logo_block %}

{% macro vf_basic_section_blocks(items=[], override_last_item_padding=false) %}
  {%- for item in items -%}
    {%- set item_padding = (item.get("padding", "")) | trim -%}
    {%- if item_padding not in ["shallow"] -%}
      {%- set item_padding="" -%}
    {%- endif -%}

    {%- set item_classes = "" -%}
    {%- if item_padding | length > 0 -%}
      {%- set item_classes = "p-section--" + item_padding -%}
    {%- endif -%}

    {#- Last item should not have any additional padding - the pattern itself already has bottom padding -#}
    {%- if loop.last and not override_last_item_padding -%}
      {%- set item_classes = "" -%}
    {%- endif -%}
    <div{%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>
      {{- basic_section_item(item) -}}
    </div>
  {%- endfor -%}
{% endmacro %}

{#-
    This helper macro used to entirely implement the description block for this pattern.
    The description block has since been upstreamed to `templates/_macros/shared/vf_description-block.jinja`.
    Now, this helper serves as an adapter between the established API of the basic section and the description block.
-#}
{%-macro _basic_section_description(description_config={}) -%}
    {{- vf_description_block(
        type=description_config.get("type"),
        content=description_config.get("content")
    ) -}}
{%- endmacro -%}

# image_config
# - aspect_ratio: "16-9" | "3-2" | "2-3", "cinematic" | "" (default is "")
# - caption_html: The HTML content for the caption of the image (optional). Will be wrapped in <figcaption>, and the image and caption will be wrapped in a <figure>.
# - is_highlighted: Whether to apply the "is-highlighted" class to the image container (default is true).
# - is_cover: Whether to apply the "is-cover" class to the image container (default is false).
# - attrs: A dictionary of attributes to apply to the image
{% macro _basic_section_image(image_config={}) %}
  {%- set aspect_ratio = image_config.get("aspect_ratio", "") | trim -%}
  {%- if aspect_ratio not in ["16-9", "3-2", "2-3", "cinematic"] -%}
    {%- set aspect_ratio = "" -%}
  {%- endif -%}

  {%- set caption_html = image_config.get("caption_html", "") | trim -%}
  {%- set has_caption = caption_html | length > 0 -%}

  {%- set is_highlighted = image_config.get("is_highlighted", true) -%}
  {%- set is_cover = image_config.get("is_cover", false) -%}

  {%- if has_caption -%}
  <figure>
  {%- endif -%}
  <div class="p-image-container{%- if aspect_ratio | length > 0 -%}--{{- aspect_ratio -}}{%- endif %}{%- if is_highlighted %} is-highlighted{% endif -%}{%- if is_cover %} is-cover{% endif -%}">
    <img class="p-image-container__image {{ image_config.get("attrs", {}).get("class", "") -}}"
      {%- for attr, value in image_config.get("attrs", {}).items() -%}
        {% if attr != "class" %}
          {{ attr }}="{{ value }}"
        {%- endif -%}
      {%- endfor -%}
    />
  </div>
  {%- if has_caption -%}
    <figcaption>
      {{- caption_html | safe -}}
    </figcaption>
  </figure>
  {%- endif -%}
{% endmacro %}

# video_config
# - attrs: A dictionary of attributes to apply to the video iframe
{% macro _basic_section_video(video_config={}) %}
  <div class="u-embedded-media">
    <iframe class="u-embedded-media__element {{ video_config.get("attrs", {}).get("class", "") -}}"
      {%- for attr, value in video_config.get("attrs", {}).items() -%}
        {% if attr != "class" %}
          {{ attr }}="{{ value }}"
        {%- endif -%}
      {%- endfor -%}
    ></iframe>
  </div>
{% endmacro %}

# notification_config
# - type: "information" | "caution" | "negative" | "positive" (default is "information")
# - title: The title of notification. Plain text.
# - content: The content of the notification. Plain text.
{% macro _basic_section_notification(notification_config={}) %}
  {%- set type = (notification_config.get("type", "information")) | trim | lower -%}
  {%- if type not in ["information", "caution", "negative", "positive"] -%}
    {%- set type = "information" -%}
  {%- endif -%}
  <div class="p-notification--{{ type }}">
    <div class="p-notification__content">
      <h5 class="p-notification__title">{{ notification_config.get("title", "") }}</h5>
      <p class="p-notification__message">{{ notification_config.get("content", "") }}</p>
    </div>
  </div>
{% endmacro %}

# list_config
# - list_item_type: "bullet" | "tick" | "cross" | "number" | "" (default is "")
# - list_items: A list of items to be displayed in the section.
# - - content: The HTML content of the list item.
# - - sublist: A nested list configuration
{% macro _basic_section_list(list_config={}) %}
  {%- if list_config.get("list_items", []) | length > 0 -%}
    {#- Note: namespace() requires jinja2 2.10 or later -#}
    {%- set ns = namespace(list_tag="ul") -%}

    {#- If any of the list items is numbered, the entire list is numbered -#}
    {%- for list_item in list_config.get("list_items", []) -%}
      {%- if list_item.get("list_item_type", "")|trim|lower == "number" -%}
        {%- set ns.list_tag = "ol" -%}
      {%- endif -%}
    {%- endfor -%}

    <{{ ns.list_tag }} class="p-list--divided">
    {%- for list_item in list_config.get("list_items", []) -%}
      {%- set list_item_type=list_item.get("list_item_type", "") | trim | lower -%}
      {#- If the list is ordered, ignore list item type. Prevents from drawing both a tick and a number, for example. -#}
      {%- if ns.list_tag == "ol" -%}
        {%- set list_item_type = 'number' -%}
      {%- elif list_item_type|length > 0 and list_item_type not in ['bullet', 'tick', 'number', 'cross'] -%}
        {%- set list_item_type = '' -%}
      {%- endif -%}

      {%- set list_item_style_class = "" -%}
      {%- if list_item_type == "bullet" -%}
        {%- set list_item_style_class = "has-bullet" -%}
      {%- elif list_item_type == "tick" -%}
        {%- set list_item_style_class = "is-ticked" -%}
      {%- elif list_item_type == "cross" -%}
        {%- set list_item_style_class = "is-crossed u-text--muted" -%}
      {%- endif -%}

      <li class="p-list__item {{ list_item_style_class }}">
        {{- list_item.get("content", "") | safe -}}
        {%- if "sublist" in list_item -%}
          {{- _basic_section_list(list_config=list_item["sublist"]) -}}
        {%- endif -%}
      </li>
    {%- endfor -%}
    </{{ ns.list_tag }}>
  {%- endif -%}
{% endmacro %}

# code_block_config
# - content: The HTML content to be displayed in the code block. Will be wrapped in a <pre> tag.
# - is_code_snippet: Boolean to indicate if the content is a code snippet (default is false). If true, the content will be wrapped in a <code> tag, within the <pre> tag.
{% macro _basic_section_code_block(code_block_config={}) %}
  {%- set is_code_snippet = code_block_config.get("is_code_snippet", False) -%}
  <pre>
    {%- if is_code_snippet -%}
    <code>
    {%- endif -%}
    {{- vf_dedent(code_block_config.get("content", "")) | safe -}}
    {%- if is_code_snippet -%}
    </code>
    {%- endif -%}
  </pre>
{% endmacro %}

{#-
    This helper macro used to entirely implement the cta block for this pattern.
    The CTA block has since been upstreamed to `templates/_macros/shared/vf_cta-block.jinja`.
    Now, this helper serves as an adapter between the established API of the basic section and the CTA block.
 #}
{% macro _basic_section_cta_block(cta_block_config={}) %}
  {{- vf_cta_block(
    primary=cta_block_config.get("primary"),
    secondaries=cta_block_config.get("secondaries"),
    link=cta_block_config.get("link")
  ) -}}
{% endmacro %}

# item_config
# - type: "description" | "image" | "video" | "list" | "code-block" | "logo-block" | "liked-logo-block" | "cta-block" | "notification"
# - item: The configuration for the item, which varies based on the type.
{% macro basic_section_item(item_config={}) %}
  {%- set type = (item_config.get("type", "")) | trim -%}

  {%- if type == "description" -%}
    {{- _basic_section_description(item_config.get("item", {})) -}}
  {%- elif type == "image" -%}
    {{- _basic_section_image(item_config.get("item", {})) -}}
  {%- elif type == "video" -%}
    {{- _basic_section_video(item_config.get("item", {})) -}}
  {%- elif type == "list"  -%}
    {{- _basic_section_list(item_config.get("item", {})) -}}
  {%- elif type == "code-block" -%}
    {{- _basic_section_code_block(item_config.get("item", {})) -}}
  {%- elif type =="logo-block" -%}
    {{- vf_logo_block(item_config.get("item", {})) -}}
  {%- elif type == "linked-logo-block" -%}
    {{- vf_linked_logo_block(item_config.get("item", {})) -}}
  {%- elif type == "cta-block" -%}
    {{- _basic_section_cta_block(item_config.get("item", {})) -}}
  {%- elif type == "notification" -%}
    {{- _basic_section_notification(item_config.get("item", {})) -}}
  {%- endif -%}
{% endmacro %}

{% macro basic_section_title(title={}) %}
  <h2>
    {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
      <a
        {% for attr, value in title.get("link_attrs", {}).items() -%}
          {{ attr }}="{{ value }}"
        {%- endfor -%}
      >{{- title.get("text", "") -}}</a>
    {%- else -%}
      {{- title.get("text", "") -}}
    {%- endif -%}
  </h2>
{%- endmacro -%}

# Params
# title: A dictionary with "text" and optional "link_attrs" (a dictionary of link attributes for the title).
# subtitle: A dictionary with "text" (required) and optional "heading_level" (default is 4).
# label_text: Muted heading above the title.
# items: A list of items to be displayed in the section.
# padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
# is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
# top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
# attrs: A dictionary of attributes to apply to the section element.
{% macro vf_basic_section(
  title={},
  label_text="",
  subtitle={},
  items=[],
  padding="default",
  is_split_on_medium=false,
  top_rule_variant="default",
  override_last_item_padding=false,
  attrs={}
) -%}

  {%- set padding = padding | trim -%}
  {%- if padding not in ["deep", "shallow", "default"] -%}
    {%- set padding = "default" -%}
  {%- endif -%}

  {%- set padding_classes = "p-section--" + padding -%}
  {%- if padding == "default" -%}
  {%- set padding_classes = "p-section" -%}
  {%- endif -%}

  {%- set label_text=label_text|trim -%}
  {%- set subtitle_text = subtitle.get("text", "") | trim -%}
  {%- set subtitle_heading_level = subtitle.get("heading_level", 4) -%}
  {%- if subtitle_heading_level not in [4, 5] -%}
    {%- set subtitle_heading_level = 4 -%}
  {%- endif -%}

  {%- set has_label = label_text|length > 0 -%}
  {%- set has_subtitle = subtitle_text|length > 0 -%}

<section class="{{ padding_classes }} {{ attrs.get("class", "") -}}" 
  {%- for attr, value in attrs.items() -%}
    {% if attr != "class" %}
      {{ attr }}="{{ value }}"
    {%- endif -%}
  {%- endfor -%}
>
  <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
    {{ vf_section_top_rule(top_rule_variant) }}
    <div class="grid-col">
      {%- if has_label -%}
        <h3 class="p-muted-heading u-no-padding--top u-no-margin--bottom">{{- label_text -}}</h3>
      {%- endif -%}
      {{ basic_section_title(title) }}
    </div>
    <div class="grid-col">
      {%- if has_subtitle -%}
        <p class="p-heading--{{ subtitle_heading_level }}">{{- subtitle_text -}}</p>
      {%- endif -%}
      {{- vf_basic_section_blocks(items=items, override_last_item_padding=override_last_item_padding) -}}
    </div>
  </div>
</section>

{%- endmacro %}