{%- liquid
  unless product
    assign product = section.settings.product
  endunless
  if block.settings.visibility == 'all'
  elsif block.settings.visibility == 'collection'
    assign collection_based_title = block.settings.collection_based | map: 'title'
    if collection_based_title.size == 0
      continue
    endif
    assign pr_title_and_collections = product.collections | map: 'title' | concat: collection_based_title
    assign pr_title_and_collections_uniq = pr_title_and_collections | uniq
    if pr_title_and_collections_uniq.size == pr_title_and_collections.size
      continue
    endif
  elsif block.settings.visibility == 'type'
    if product.type == blank
      continue
    endif
    assign type_based = block.settings.type_based | remove: '  ' | replace: ', ', ',' | replace: ' ,', ',' | split: ','
    unless type_based contains product.type
      continue
    endunless
  elsif block.settings.visibility == 'tag'
    if product.tags.size == 0
      continue
    endif
    assign tag_based = block.settings.tag_based | remove: '  ' | replace: ', ', ',' | replace: ' ,', ',' | split: ','
    assign pr_tag_and_tags = product.tags | concat: tag_based
    assign pr_tag_and_tags_uniq = pr_tag_and_tags | uniq
    if pr_tag_and_tags_uniq.size == pr_tag_and_tags.size
      continue
    endif
  elsif block.settings.visibility == 'product'
    assign product_based_title = block.settings.product_based | map: 'title'
    unless product_based_title contains product.title
      continue
    endunless
  elsif block.settings.visibility == 'metafield'
    unless product.metafields.theme.visibility_customizable
      continue
    endunless
  endif
  assign id = "property" | append: block.id
  assign property_type = block.settings.property_type
  if  block.settings.show_at_ck_cart
    assign property_name = block.settings.title | escape
  else
    assign property_name = '_' | append: block.settings.title | escape
  endif
  assign product_form_id = 'product-form-'| append: section.id | append: product.id

-%}
<div class="hdt-product-info__item hdt-product__property" data-type="{{ block.type }}" {{ block.shopify_attributes }}>
  {%- case property_type -%}
    {%- when 'checkbox' -%}
      <hdt-block-required detect="checked" event="change" class="hdt-line-item-property hdt-line-item-property--{{ property_type }}" {{ block.shopify_attributes }}>
        <input form="{{ product_form_id }}" class="hdt-grid-1x1" type="checkbox" id="{{ id }}"{% if block.settings.use_required %} required{% endif %} name="properties[{{ property_name }}]" value="{{ block.settings.ck_value | escape }}">
        <label for="{{ id }}" class="hdt-s-text hdt-inline-block">{{ block.settings.title }}</label>
      </hdt-block-required>
  
    {%- when 'text' -%}
      <hdt-block-required detect="length" event="input" class="hdt-line-item-property hdt-line-item-property--{{ property_type }}" {{ block.shopify_attributes }}>
        <div class="hdt-field">
          {%- if block.settings.type_text == 'short' -%}
            <input class="hdt-field__input hdt-input"  placeholder="{{ block.settings.title | escape }}" type="text" id="{{ id }}" form="{{ product_form_id }}"{% if block.settings.use_required %} required{% endif %} name="properties[{{ property_name }}]"{% if block.settings.max_characters > 0 %} maxlength="{{ block.settings.max_characters }}"{% endif %}>
            <label class="hdt-s-text hdt-font-medium hdt-block hdt-field__label">{{ block.settings.title | escape }}</label>
          {%- else -%}
            <label class="hdt-s-text hdt-font-medium hdt-block">{{ block.settings.title | escape }}</label>
            <textarea class="hdt-field__input hdt-textarea" rows="4" id="{{ id }}" form="{{ product_form_id }}"{% if block.settings.use_required %} required{% endif %} name="properties[{{ property_name }}]"{% if block.settings.max_characters > 0 %} maxlength="{{ block.settings.max_characters }}"{% endif %}></textarea>
          {%- endif -%}
          {% comment %} <label class="hdt-field__label" for="{{ id }}">{{ block.settings.title }}</label> {% endcomment %}
        </div>
      </hdt-block-required>
  
    {%- when 'options' -%}
      {%- liquid
        assign arr_options = block.settings.options | newline_to_br | split: '<br />'
        if arr_options.size == 0
          continue
        endif
      -%}
      <hdt-block-required detect="checked" event="change" class="hdt-line-item-property hdt-line-item-property--{{ property_type }}" {{ block.shopify_attributes }}>
        <label class="hdt-s-text hdt-block">{{ block.settings.title }}</label>
        {%- if block.settings.type_options == 'radio' -%}
          {%- for option in arr_options -%}
            <div class="hdt-property-option">
              <input id="{{ id }}__{{ forloop.index }}" type="radio" form="{{ product_form_id }}"{% if block.settings.use_required %} required{% endif %} name="properties[{{ property_name }}]" value="{{ option | strip | escape }}">
              <label for="{{ id }}__{{ forloop.index }}" class="hdt-s-text">{{ option }}</label>
            </div>
          {%- endfor -%}
        {%- elsif block.settings.type_options == 'select' -%}
          <select class="hdt-select hdt-s-text" id="{{ id }}" form="{{ product_form_id }}" name="properties[{{ property_name }}]">
            {%- for option in arr_options %}<option value="{{ option | strip | escape }}">{{ option }}</option>{% endfor -%}
          </select>
        {%- else -%}
          {%- for option in arr_options -%}
            <div class="hdt-property-option">
              <input id="{{ id }}__{{ forloop.index }}" type="checkbox" sync-name="properties[{{ property_name }}]" value="{{ option | strip | escape }}">
              <label for="{{ id }}__{{ forloop.index }}" class="hdt-s-text">{{ option }}</label>
            </div>
          {%- endfor -%}
          <input type="hidden" form="{{ product_form_id }}" id="{{ id }}" name="properties[{{ property_name }}]"{% if block.settings.use_required %} required{% endif %}>
        {%- endif -%}
      </hdt-block-required>
  
  {%- endcase -%}
</div>
{% schema %}
{
  "name": "t:sections.main-product.blocks.line_item_property.name",
  "tag": null,
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-product.blocks.line_item_property.settings.paragraph"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.main-product.blocks.line_item_property.settings.property_label.label",
      "default": "Your label"
    },
    {
      "type": "select",
      "id": "property_type",
      "options": [
        {
          "value": "text",
          "label": "t:sections.main-product.blocks.line_item_property.settings.property_type.options__1.label"
        },
        {
          "value": "checkbox",
          "label": "t:sections.main-product.blocks.line_item_property.settings.property_type.options__2.label"
        },
        {
          "value": "options",
          "label": "t:sections.main-product.blocks.line_item_property.settings.property_type.options__3.label"
        }
      ],
      "default": "text",
      "label": "t:sections.main-product.blocks.line_item_property.settings.property_type.label"
    },
    {
      "type": "checkbox",
      "id": "use_required",
      "label": "t:sections.main-product.blocks.line_item_property.settings.use_required.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.use_required.info",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_at_ck_cart",
      "label": "t:sections.main-product.blocks.line_item_property.settings.show_at_ck_cart.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.show_at_ck_cart.info",
      "default": true
    },
    {
      "type": "header",
      "content": "t:sections.main-product.blocks.line_item_property.settings.header__1.content",
      "info": "t:sections.main-product.blocks.line_item_property.settings.header__1.info"
    },
    {
      "type": "select",
      "id": "type_text",
      "options": [
        {
          "value": "short",
          "label": "t:sections.main-product.blocks.line_item_property.settings.type_text.options__1.label"
        },
        {
          "value": "long",
          "label": "t:sections.main-product.blocks.line_item_property.settings.type_text.options__2.label"
        }
      ],
      "default": "short",
      "label": "t:sections.main-product.blocks.line_item_property.settings.type_text.label"
    },
    {
      "type": "number",
      "id": "max_characters",
      "label": "t:sections.main-product.blocks.line_item_property.settings.max_characters.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.blocks.line_item_property.settings.header__2.content",
      "info": "t:sections.main-product.blocks.line_item_property.settings.header__2.info"
    },
    {
      "type": "text",
      "id": "ck_value",
      "default": "Yes",
      "label": "t:sections.main-product.blocks.line_item_property.settings.ck_value.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.ck_value.info"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.blocks.line_item_property.settings.header__3.content",
      "info": "t:sections.main-product.blocks.line_item_property.settings.header__3.info"
    },
    {
      "type": "select",
      "id": "type_options",
      "options": [
        {
          "value": "select",
          "label": "t:sections.main-product.blocks.line_item_property.settings.type_options.options__1.label"
        },
        {
          "value": "radio",
          "label": "t:sections.main-product.blocks.line_item_property.settings.type_options.options__2.label"
        }
      ],
      "default": "select",
      "label": "t:sections.main-product.blocks.line_item_property.settings.type_options.label"
    },
    {
      "type": "textarea",
      "id": "options",
      "default": "option1\noption2",
      "label": "t:sections.main-product.blocks.line_item_property.settings.options.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.options.info"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.blocks.line_item_property.settings.header__4.content"
    },
    {
      "type": "radio",
      "id": "visibility",
      "default": "all",
      "options": [
        {
          "value": "all",
          "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.options__1.label"
        },
        {
          "value": "collection",
          "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.options__2.label"
        },
        {
          "value": "type",
          "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.options__3.label"
        },
        {
          "value": "tag",
          "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.options__4.label"
        },
        {
          "value": "product",
          "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.options__5.label"
        },
        {
          "value": "metafield",
          "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.options__6.label"
        }
      ],
      "label": "t:sections.main-product.blocks.line_item_property.settings.visibility.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.visibility.info"
    },
    {
      "type": "collection_list",
      "id": "collection_based",
      "label": "t:sections.main-product.blocks.line_item_property.settings.collection_based.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.collection_based.info"
    },
    {
      "type": "textarea",
      "id": "type_based",
      "label": "t:sections.main-product.blocks.line_item_property.settings.type_based.label",
      "placeholder": "type1, type2",
      "info": "t:sections.main-product.blocks.line_item_property.settings.type_based.info"
    },
    {
      "type": "textarea",
      "id": "tag_based",
      "label": "t:sections.main-product.blocks.line_item_property.settings.tag_based.label",
      "placeholder": "tag1, tag2",
      "info": "t:sections.main-product.blocks.line_item_property.settings.tag_based.info"
    },
    {
      "type": "product_list",
      "id": "product_based",
      "label": "t:sections.main-product.blocks.line_item_property.settings.product_based.label",
      "info": "t:sections.main-product.blocks.line_item_property.settings.product_based.info"
    }
  ],
  "presets": [
    { 
      "name": "t:sections.main-product.blocks.line_item_property.name",
    }
  ]
}
{% endschema %}