{# image presets #}

{% set image1360x765 = {
  image: {
    src: '448x448',
    width: 1360,
    height: 'auto'
  },
  sources: [
    { media: '1200', size: '1360x765'},
    { media: '992', size: '1136x639'},
    { media: '768', size: '928x522'},
    { media: '480', size: '735x414'},
    { media: '360', size: '448x252'}
  ]
} %}

{% set image340x340 = {
  image: {
    src: '340x340',
    width: 340,
    height: 'auto'
  },
  sources: []
} %}

{% set image340x227 = {
  image: {
    src: '340x227',
    width: 340,
    height: 'auto'
  },
  sources: []
} %}

{% set image664x374 = {
  image: {
    src: '664x374',
    width: 664,
    height: 'auto'
  },
  sources: []
} %}

{% set image664x664 = {
  image: {
    src: '448x448',
    width: 664,
    height: 'auto'
  },
  sources: [
    { media: '480', size: '664x664' },
    { media: '360', size: '448x448' }
  ]
} %}

{% set image455x304 = {
  image: {
    src: '455x304',
    width: 455,
    height: 'auto'
  },
  sources: []
} %}

{% set image449x449 = {
  image: {
    src: '449x449',
    width: 449,
    height: 'auto'
  },
  sources: []
} %}

{% set TEXT_AND_MEDIA_IMAGE = {
  caption: 'Author Name',
  media: {
    sources: [],
    image: {
      src: '340x340'
    }
  }
} %}

{% set TEXT_AND_MEDIA_IMAGE_RECTANGLE = {
  caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet assumenda consectetur dignissimos est fugit ipsa laborum libero, minus neque perspiciatis praesentium quae quia quod reiciendis reprehenderit repudiandae tempore vel?',
  media: {
    sources: [],
    image: {
      src: '680x340'
    }
  }
} %}

{% set TEXT_AND_MEDIA_GALLERY_DEFAULTS = {
  isCenter: false,
  isVideo: false,
  useFancybox: true,
  medias: [
    [TEXT_AND_MEDIA_IMAGE]
  ],
  medias: [],
  columnsCount: ''
} %}

{% macro TextAndMediaGallery(settings = {}) %}
  {% set settings = merge(TEXT_AND_MEDIA_GALLERY_DEFAULTS, settings) %}
  {% set galleryID = unique() %}

  {% set columnsCount = 1 %}

  {% if settings.medias %}
    {% for mediaRow in settings.medias %}
      {% set columnsInRow = mediaRow | length %}
      {% set columnsCount = columnsInRow if columnsInRow > columnsCount else columnsCount %}
    {% endfor %}
  {% endif %}

  {% set content %}
    {% for mediaRow in settings.medias %}
      <div class="text-and-media-gallery__row">
        {% for media in mediaRow %}
          {% set mediaSettings = merge({
            isVideo: settings.isVideo,
            sources: []
          }, media.media ) %}
          <div class="text-and-media-gallery__column">
            {{ MediaObject({
              caption: media.caption,
              media: mediaSettings,
              useFancybox: settings.useFancybox,
              galleryID: 'gallery-' + galleryID
            }) }}
          </div>
        {% endfor %}
      </div>
    {% endfor %}
  {% endset %}
  <div class="text-and-media-gallery text-and-media-gallery--columns-{{ settings.columnsCount or columnsCount }}">
    <div class="text-and-media-gallery__wrapper">
      {{ content | safe }}
    </div>
  </div>
{% endmacro %}

{% set TEXT_AND_MEDIA_DEFAULTS = {
  noWrap: false,
  useFancybox: true,
  textAlign: '',
  isVideo: false,
  mediaAlign: 'left',
  medias: [[TEXT_AND_MEDIA_IMAGE]],
  mediaWidth: '',
  mediaColumnsCount: ''
} %}

{% macro TextAndMedia(settings = {}) %}
  {% set settings = merge(TEXT_AND_MEDIA_DEFAULTS, settings) %}
  {% set classNames = '' %}
  {% set isCenter = false %}

  {% if settings.mediaAlign %}
    {% if settings.mediaAlign === 'right' or settings.mediaAlign === 'left' %}
      {% set classNames = classNames + ' text-and-media--intext' %}
    {% endif %}

    {% if settings.mediaAlign === 'above' or settings.mediaAlign === 'below' %}
      {% set classNames = classNames + ' text-and-media--gallery-center'  %}
      {% set isCenter = true %}
    {% endif %}

    {% set classNames = classNames + ' text-and-media--gallery-' + settings.mediaAlign %}
  {% endif %}

  {% if settings.textAlign %}
    {% set classNames = classNames + ' text-and-media--text-' + settings.textAlign %}
  {% endif %}

  {% if settings.noWrap %}
    {% set classNames = classNames + ' text-and-media--no-wrap' %}
  {% endif %}

  {% if settings.mediaWidth !== '' %}
    {% set classNames = classNames + ' text-and-media--gallery-width-' +  settings.mediaWidth %}
  {% endif %}

  {% set contentCaller %}
    {% if caller %}
      <div class="text-and-media__content rte">
        {{ caller() }}
      </div>
    {% endif %}
  {% endset %}

  {% set contentGallery %}
    {% if settings.medias and settings.medias | length %}
      <div class="text-and-media__gallery">
        {{ TextAndMediaGallery({
          medias: settings.medias,
          isVideo: settings.isVideo,
          useFancybox: settings.useFancybox,
          isCenter: isCenter,
          columnsCount: settings.mediaColumnsCount
        }) }}
      </div>
    {% endif %}
  {% endset %}

  <div class="text-and-media {{ classNames }}">
    {% if settings.mediaAlign === 'below' %}
      {{ contentCaller | safe }}
      {{ contentGallery | safe }}
    {% else %}
      {{ contentGallery | safe }}
      {{ contentCaller | safe }}
    {% endif %}
  </div>
{% endmacro %}