{% # theme-check-disable MissingTemplate %}

{% assign sect = section.settings %}

{%- style -%}
  .section-{{ section.id }}-container-margin {
    margin-top: {{ sect.mobile_margin_top }}px;
    margin-bottom: {{ sect.mobile_margin_bottom }}px;
  }

  .section-{{ section.id }}-container-padding {
    padding-top: {{ sect.mobile_padding_top }}px;
    padding-bottom: {{ sect.mobile_padding_bottom }}px;
  }

  .section-{{ section.id }}-content-container {
    color: {{ sect.content_color }};
  }

  .section-{{ section.id }}-text-gap {
    padding: 0 {{ sect.text_gap }}px;
  }

  @media screen and (min-width: 768px) {
    .section-{{ section.id }}-container-margin {
      margin-top: {{ sect.tablet_margin_top }}px;
      margin-bottom: {{ sect.tablet_margin_bottom }}px;
    }

    .section-{{ section.id }}-container-padding {
      padding-top: {{ sect.tablet_padding_top }}px;
      padding-bottom: {{ sect.tablet_padding_bottom }}px;
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section.id }}-container-margin {
      margin-top: {{ sect.desktop_margin_top }}px;
      margin-bottom: {{ sect.desktop_margin_bottom }}px;
    }

    .section-{{ section.id }}-container-padding {
      padding-top: {{ sect.desktop_padding_top }}px;
      padding-bottom: {{ sect.desktop_padding_bottom }}px;
    }
  }
{%- endstyle -%}

<script type="text/javascript">
  (function(window) {
    function Marquee(selector, speed) {
      const parentSelector = document.querySelector(selector);
      const clone = parentSelector.innerHTML;
      const firstElement = parentSelector.children[0];
      let i = 0;

      for( let i = 0; i < {{ sect.text_multiply }}; i++ ) {
        parentSelector.insertAdjacentHTML('beforeend', clone);
      }
    
      setInterval(function () {
          firstElement.style.marginLeft = `-${i}px`;
          if (i > firstElement.clientWidth) {
            i = 0;
          }
          i = i + speed;
      }, 0);
    }

    //after window is completed load
    //1 class selector for marquee
    const speed = {{ sect.speed | times: 0.1 | default: 0.5 }};

    window.addEventListener('load',  e => setTimeout(Marquee('.marquee', speed), 100))
  })(window)
</script>

{% liquid
  assign seperator = sect.seperator_icon
%}

{% capture container_margin_padding_settings %}
  section-{{ section.id }}-container-margin section-{{ section.id }}-container-padding
{% endcapture %}

{% capture text_font_settings %}
  {{ sect.font_family }} {{ sect.text_font_weight }} {{ sect.text_font_size_desktop }} {{ sect.text_font_size_mobile }}
{% endcapture %}

<section class="relative z-0 px-0 {{ container_margin_padding_settings }} apply-scheme {{ sect.color_scheme }} w-full">
  <div class="marquee z-10 w-full overflow-hidden flex">
    <div class="section-{{ section.id }}-content-container whitespace-nowrap flex flex-row">
      {% for block in section.blocks %}
        <span class="{{ text_font_settings | strip }} section-{{ section.id }}-text-gap">{{ block.settings.content | upcase }}</span>
        {%- if forloop.length > 1 -%}
          {% if forloop.last %}
            {% if sect.text_multiply > 0 %}
              <div style="min-width:{{ seperator.width }}px">
                {% render 'hw_generic-image', image: seperator, parent_id: section.id, styles: 'object-contain' %}
              </div>
            {% endif %}
          {% else %}
            <div style="min-width:{{ seperator.width }}px">
              {% render 'hw_generic-image', image: seperator, parent_id: section.id, styles: 'object-contain' %}
            </div>
          {% endif %}
        {%- endif -%}
      {% endfor %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Marquee",
  "settings": [
    {
      "type": "image_picker",
      "id": "seperator_icon",
      "label": "Seperator Icon",
      "info": "The item image can be PNG or SVG"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "color-scheme-1",
          "label": "t:sections.all.settings.color_scheme.options__1.label"
        },
        {
          "value": "color-scheme-2",
          "label": "t:sections.all.settings.color_scheme.options__2.label"
        },
        {
          "value": "color-scheme-3",
          "label": "t:sections.all.settings.color_scheme.options__3.label"
        },
        {
          "value": "color-scheme-4",
          "label": "t:sections.all.settings.color_scheme.options__4.label"
        },
        {
          "value": "color-scheme-5",
          "label": "t:sections.all.settings.color_scheme.options__5.label"
        },
        {
          "value": "color-scheme-6",
          "label": "t:sections.all.settings.color_scheme.options__6.label"
        }
      ],
      "default": "color-scheme-3",
      "label": "t:sections.all.settings.color_scheme.label"
    },
    {
      "type": "color",
      "id": "content_color",
      "default": "#000000",
      "label": "Content text color"
    },
    {
      "type": "select",
      "id": "font_family",
      "options": [
        {
          "value": "font-primary",
          "label": "Primary font"
        },
        {
          "value": "font-display",
          "label": "Secondary font"
        }
      ],
      "default": "font-primary",
      "label": "Font family"
    },
    {
      "type": "select",
      "id": "text_font_weight",
      "default": "font-normal",
      "label": "Text font weight",
      "options": [
        {
          "value": "font-thin",
          "label": "Thin"
        },
        {
          "value": "font-extralight",
          "label": "Extra Light"
        },
        {
          "value": "font-light",
          "label": "Light"
        },
        {
          "value": "font-normal",
          "label": "Normal"
        },
        {
          "value": "font-medium",
          "label": "Medium"
        },
        {
          "value": "font-semibold",
          "label": "Semi Bold"
        },
        {
          "value": "font-bold",
          "label": "Bold"
        },
        {
          "value": "font-extrabold",
          "label": "Extra Bold"
        },
        {
          "value": "font-black",
          "label": "Black"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_font_size_desktop",
      "default": "md:text-base",
      "label": "Text font size",
      "options": [
        {
          "value": "md:text-xs",
          "label": "xs"
        },
        {
          "value": "md:text-sm",
          "label": "sm"
        },
        {
          "value": "md:text-base",
          "label": "base"
        },
        {
          "value": "md:text-lg",
          "label": "lg"
        },
        {
          "value": "md:text-xl",
          "label": "xl"
        },
        {
          "value": "md:text-2xl",
          "label": "2xl"
        },
        {
          "value": "md:text-3xl",
          "label": "3xl"
        },
        {
          "value": "md:text-4xl",
          "label": "4xl"
        },
        {
          "value": "md:text-5xl",
          "label": "5xl"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_font_size_mobile",
      "default": "",
      "label": "Text font size (Mobile)",
      "options": [
        {
          "value": "",
          "label": "none"
        },
        {
          "value": "text-xs",
          "label": "xs"
        },
        {
          "value": "text-sm",
          "label": "sm"
        },
        {
          "value": "text-base",
          "label": "base"
        },
        {
          "value": "text-lg",
          "label": "lg"
        },
        {
          "value": "text-xl",
          "label": "xl"
        },
        {
          "value": "text-2xl",
          "label": "2xl"
        },
        {
          "value": "text-3xl",
          "label": "3xl"
        },
        {
          "value": "text-4xl",
          "label": "4xl"
        },
        {
          "value": "text-5xl",
          "label": "5xl"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_multiply",
      "min": 0,
      "max": 30,
      "step": 1,
      "label": "Marquee text multiply",
      "default": 5
    },
    {
      "type": "range",
      "id": "text_gap",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Marquee text gap",
      "default": 0
    },
    {
      "type": "range",
      "id": "speed",
      "min": 0,
      "max": 20,
      "step": 1,
      "label": "Marquee speed",
      "default": 5
    },
    {
      "type": "header",
      "content": "Margin settings"
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin Top (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin Top (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin Top (Mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin Bottom (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin Bottom (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin Bottom (Mobile)",
      "default": 0
    },
    {
      "type": "header",
      "content": "Padding settings"
    },
    {
      "type": "range",
      "id": "desktop_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Top (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Top (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Top (Mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom (Mobile)",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "text_item",
      "name": "Text item",
      "limit": 10,
      "settings": [
        {
          "type": "text",
          "id": "content",
          "default": "Item text",
          "label": "Item text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text_item"
        },
        {
          "type": "text_item"
        },
        {
          "type": "text_item"
        },
        {
          "type": "text_item"
        }
      ]
    }
  ]
}
{% endschema %}