{% comment %}
  Renders a cart note overlay 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-note', 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.note_title' | t
  assign label = 'sections.cart.note_label' | t
  assign submit_label = 'sections.cart.note_submit' | t
  assign cancel_label = 'sections.cart.cancel' | t
  assign name = 'cart-note-' | 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-note class='cart-note-textarea'>
    <label>{{ label }}</label>
    {% render 'field-textarea', name: 'note', value: cart.note %}
  </xo-cart-note>
{% elsif type == 'collapse' %}
  {% capture collapse_content %}
    <xo-cart-note class='cart-note-textarea'>
      {% render 'field-textarea', name: 'note', value: cart.note %}
    </xo-cart-note>
  {% endcapture %}
  <div class='xo-cart-note'>
    {% render 'collapse-style2', name: name, title: label, content: collapse_content %}
  </div>
{% else %}
  <div class='xo-cart-note'>
    <div class='xo-cart-note__btn'>
      <xo-{{ tag_type }}-trigger xo-name='{{ name }}' class='xo-cart-note__trigger'>
        <div class='xo-cart-note__icon'>
          {% render 'icon', name: 'order', icon_size: '19' %}
        </div>
        <div class='xo-cart-note__text'>{{ title }}</div>
      </xo-{{ tag_type }}-trigger>
    </div>

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