{% comment %}
  Renders the cart discount component.

  Accepts:
  - type: {String} Type of the component (optional, value: regular, popover, drawer, modal, collapse)
  - overlay_width: {String} Width of the overlay (optional)
  - uid: {String} Unique identifier for the component

  Usage:
  {% render 'cart-discount', type: 'popover' %}
{% endcomment %}

{% liquid
  if type == null
    assign type = 'regular'
  endif
  if type == 'popover'
    assign tag_type = 'popover'
  elsif type == 'drawer' or type == 'modal'
    assign tag_type = 'modal'
  endif
  assign title = 'sections.cart.discount_title' | t
  assign label = 'sections.cart.discount_label' | t
  assign submit_label = 'sections.cart.save' | t
  assign cancel_label = 'sections.cart.cancel' | t
  assign name = 'cart-discount-' | append: uid
%}

{% capture overlay_attrs %}
  {% if type == 'popover' %}
    xo-animate='fade-down' xo-placement='top-center'
  {% elsif type == 'drawer' %}
  {% if settings.cart_drawer_placement == 'left' %}
    {% assign drawer_placement = 'bottom-left' %}
    {% else %}
    {% assign drawer_placement = 'bottom-right' %}
  {% endif %}
    xo-animate='slide-up' xo-placement= {{ drawer_placement }} xo-backdrop-color="transparent"
  {% endif %}
{% endcapture %}

{% if type == 'regular' %}
  <xo-cart-discount class='xo-cart-discount'>
    <label>{{ title }}</label>
    {% render 'field-input', name: 'discount' %}
    {% render 'space', value: '2rem' %}
  </xo-cart-discount>
{% elsif type == 'collapse' %}
  {% capture collapse_content %}
    <xo-cart-discount class='xo-cart-discount'>
      {% render 'field-input', name: 'discount' %}
    </xo-cart-discount>
  {% endcapture %}
  <div class='xo-cart-discount'>
    {% render 'collapse-style2', name: name, title: title, content: collapse_content %}
    {% render 'space', value: '2rem' %}
  </div>
{% else %}
  <div class='xo-cart-discount'>
    <div class='xo-cart-discount__btn'>
      <xo-{{ tag_type }}-trigger xo-name='{{ name }}' class='xo-cart-discount__trigger'>
        <div class='xo-cart-discount__icon'>
          {% render 'icon', name: 'coupon', size: '19' %}
        </div>
        <div class='xo-cart-discount__text'>{{ title }}</div>
      </xo-{{ tag_type }}-trigger>
    </div>

    <xo-{{ tag_type }} {{ overlay_attrs }} xo-portal xo-autofocus xo-name='{{ name }}' class='xo-cart-discount__content'>
      <div
        class='
          xo-cart-discount__inner
          {% unless type == 'regular' or type == 'collapse' %} xo-cart-discount__inner--padding{% endunless %}
          {% if type == 'popover' or type == 'drawer' %} xo-cart-discount__inner--effect{% endif %}
        '
        {% if overlay_width != null %}
          style='width: {{ overlay_width }};'
        {% endif %}
      >
        <h2 class='xo-cart-discount__title h2 mb-30'>{{ title }}</h2>
        <xo-cart-discount class='cart-discount-field'>
          {% render 'field-input', name: 'discount' %}
          {% render 'space', value: '2rem' %}
          <div class='flex-h gap-10'>
            <xo-cart-discount-submit class='xo-cart-discount__btn-add'>
              {% render 'button', text: submit_label, size: 'sm', style: 'primary' %}
            </xo-cart-discount-submit>
            <div class='cart-discount__btn-cancel'>
              <xo-{{ tag_type }}-trigger class='cart-discount__btn-trigger'>
                {% render 'button', text: cancel_label, size: 'sm', mode: 'dark' %}
              </xo-{{ tag_type }}-trigger>
            </div>
          </div>
        </xo-cart-discount>
      </div>
    </xo-{{ tag_type }}>
  </div>
{% endif %}
