{% set IMAGE_DEFAULT_SIZES = [
  { media: '1280', size: '1920x1920' },
  { media: '992', size: '1280x1280' },
  { media: '768', size: '992x992' },
  { media: '480', size: '768x768' },
  { media: '320', size: '460x460' }
] %}

{% set IMAGE_DEFAULT_SETTINGS = {
  className: '',
  image: {
    src: '360x360',
    className: '',
    width: '',
    height: '',
    alt: ''
  },
  useWebP: true,
  sourcesFormat: 'jpg',
  sources: IMAGE_DEFAULT_SIZES
} %}

{% macro getRetinaSize(size = '', format = '') %}
  {% set sizes = size | split('x') %}
  {% set retinaWidth = sizes[0] | int * 2 %}
  {% set retinaHeight = sizes[1] | int * 2 %}
  {{ Helpers.getPlaceholderImageURL(retinaWidth + 'x' + retinaHeight, format) }}
{% endmacro %}

{% macro renderSources(src = '', sources = [], format = 'jpg') %}
  {% for source in sources %}
    {% set sourceURL = Helpers.getPlaceholderImageURL(source.size, format) | trim %}
    {% set retinaSourceURL = getRetinaSize(source.size, format) %}
    <source type="image/{{ format }}" srcset="{{ sourceURL }}, {{ retinaSourceURL }} 2x" media="(min-width: {{ source.media }}px)">
  {% endfor %}
{% endmacro %}

{% macro Image(settings = {}) %}
  {% set settings = merge(IMAGE_DEFAULT_SETTINGS, settings) %}
  {% set rootURLMatcher = r/(\.\/)/g %}
  {% set isRelativePath = rootURLMatcher.test(settings.image.src) %}

  {% set imageURL = '' %}
  {% set imageURL2x = '' %}

  {% if isRelativePath %}
    {% set imageURL = settings.image.src | replace('./', PATH.images + '/')  %}
    {% set relativeImageURLParts = imageURL | split('.') %}
    {% if relativeImageURLParts[1] !== 'svg' %}
      {% set imageURL2x = relativeImageURLParts[0] + '-2x.' + relativeImageURLParts[1] + ' 2x'%}
    {% endif %}
  {% else %}
    {% set imageURL = Helpers.getPlaceholderImageURL(settings.image.src, settings.sourcesFormat) | trim %}
    {% set imageURL2x = getRetinaSize(settings.image.src, settings.sourcesFormat) | trim %}
    {% set imageURL2x = imageURL2x + ' 2x' if imageURL2x else '' %}
  {% endif %}

  <picture class="image {{ settings.className }}">
    {% if caller %}
      {{ caller() }}
    {% else %}
      {% if settings.useWebP %}
        {% if settings.sources | length !== 0 %}
          <!-- webp -->
          {{ renderSources(
            src = settings.image.src,
            sources = settings.sources,
            format = 'webp'
          ) }}
        {% endif %}
        {% if not isRelativePath %}
          {% set sourceURL = imageURL | replace(settings.sourcesFormat, 'webp') %}
          {% if settings.sources | length === 0 %}
            <source type="image/webp" srcset="{{ sourceURL }} 1x, {{ getRetinaSize(settings.image.src, 'webp') }} 2x">
          {% endif %}
        {% endif %}
      {% endif %}

      {% if settings.sources | length !== 0 %}
        <!-- default image format -->
        {{ renderSources(
          src = settings.image.src,
          sources = settings.sources,
          format = settings.sourcesFormat
        ) }}
      {% endif %}
      {% if not isRelativePath %}
        {% set sourceURL = imageURL | replace(settings.sourcesFormat, 'jpg') %}
        {% if settings.sources | length === 0 %}
          <source type="image/jpg" srcset="{{ sourceURL }} 1x, {{ getRetinaSize(settings.image.src, 'jpg') }} 2x">
        {% endif %}
      {% endif %}
    {% endif %}

    {% if not isRelativePath  %}
      {% set imageDimentions = settings.image.src | split('x') %}
      {% set imageWidth = imageDimentions[0] %}
      {% set imageHeight = imageDimentions[1] %}
      {% set srcSet = imageURL + ' 1x, ' + (getRetinaSize(settings.image.src, settings.sourcesFormat) | trim) + ' 2x' %}
    {% endif %}

    {% set imageSourceDimentions = [] %}
    {% set imageSourceWidth = '' %}
    {% set imageSourceHeight = '' %}
    {% if settings.sources.length %}
      {% set imageSourceDimensions = settings.sources[0].size | split('x') %}
      {% set imageSourceWidth = imageSourceDimensions[0] %}
      {% set imageSourceHeight = imageSourceDimensions[1] %}
    {% endif %}

    <img
      src="{{ imageURL }}"
      alt="{{ settings.image.alt or '[DEFAULT_ALT]' }}"
      {{ Helpers.setAttr('srcset', imageURL2x) }}
      {{ Helpers.setAttr('class', settings.image.className) }}
      {{ Helpers.setAttr('width', settings.image.width or imageSourceWidth or imageWidth) }}
      {{ Helpers.setAttr('height', settings.image.height or imageSourceHeight or imageHeight) }}
    >
  </picture>
{% endmacro %}