declare let $;

import { aboveBreakSize } from '../mmui-layout';

export function closeFiltersPanel(duration = 0, callback = null) {
  // const filtersBtn = $("#filters-btn"),
  const filtersCloseBtn = $('#filters-close-btn'),
    filtersColumn = $('#col-filters'),
    contentSection = $('#section-0');
  // buttonDuration = duration * 2.0;
  if (filtersColumn.length > 0) {
    filtersColumn.animate(
      {
        'flex-basis': '0%',
        'max-width': '0%',
        'padding-left': 0,
        'padding-right': 0,
        height: 0,
      },
      duration,
      function () {
        filtersColumn.hide().css('height', '');
        filtersCloseBtn.data('state', 'closed');
      }
    );

    // filtersBtn.fadeIn(buttonDuration, function (e) {});

    if (aboveBreakSize('lg', $(window).width())) {
      contentSection.animate(
        {
          'flex-basis': '100%',
          'max-width': '100%',
        },
        duration,
        function (e) {
          contentSection
            .addClass('col-12')
            .removeClass('col-lg-9')
            .css('flex-basis', '')
            .css('max-width', '');

          if (callback) {
            callback(e);
          }
        }
      );
    }
  }
}

export function openFiltersPanel(duration = 0, callback = null) {
  const filtersBtn = $('#filters-btn'),
    filtersColumn = $('#col-filters'),
    contentSection = $('#section-0'),
    // buttonDuration = duration * 0.5,
    filtersColumnAnimation = {
      'flex-basis': '100%',
      'max-width': '100%',
      'padding-left': '15px',
      'padding-right': '15px',
    };
  if (filtersColumn.length > 0) {
    if (aboveBreakSize('lg', $(window).width())) {
      contentSection.animate(
        {
          'flex-basis': '75%',
          'max-width': '75%',
        },
        duration,
        function () {
          contentSection
            .removeClass('col-12')
            .addClass('col-lg-9')
            .css('flex-basis', '')
            .css('max-width', '');
        }
      );

      filtersColumnAnimation['flex-basis'] = '25%';
      filtersColumnAnimation['max-width'] = '25%';
    }

    // filtersBtn.fadeOut(buttonDuration, function (e) {});

    filtersColumn
      .show()
      .animate(filtersColumnAnimation, duration, function (e) {
        filtersColumn.css('flex-basis', '').css('max-width', '');
        filtersBtn.data('state', 'open');

        if (callback) {
          callback(e);
        }
      });
  }
}

export function addFilterPanelBehavior(
  mainSectionSelector,
  duration = 1000,
  openCallBack,
  closeCallBack
) {
  /**
   *
   * @param openCallBack: a function, triggered when filter button is open
   * @param closeCallBack: a function, triggered when filter button is closed
   */
  const filtersBtn = $('#filters-btn'), //button to show the filters panel
    filtersCloseBtn = $('#filters-close-btn'), //button to close the filters panel
    filtersSummary = $('#filters-summary'), //summary area of selected filters
    filtersPanel = $('#filters-panel'),
    mainSection = $(mainSectionSelector);

  if (mainSection.length <= 0) {
    throw "Can't find main section";
  }

  function getMainSectionTop() {
    const mainSectionBox = $('.row-filters')[0].getBoundingClientRect();
    return mainSectionBox.top + $(window).scrollTop();
  }

  filtersBtn.click(function (e) {
    openFiltersPanel(duration, openCallBack);

    e.preventDefault();
  });

  filtersCloseBtn.click(function (e) {
    closeFiltersPanel(duration, closeCallBack);

    e.preventDefault();
  });

  $(window).scroll(function () {
    let w = $(this),
      sTop = w.scrollTop(),
      // breakSize = getLayoutBreakSize(w.width()),
      mainSectionTop = getMainSectionTop(),
      newTop = 0;
    if (sTop > mainSectionTop) {
      if (aboveBreakSize('lg', w.width())) {
        // 90 pixels to accommodate filter summary
        newTop = sTop - mainSectionTop + 90;

        filtersSummary.css('top', newTop);
        filtersBtn.css('top', newTop);
        filtersPanel.css('top', newTop);
      } else {
        newTop = sTop - mainSectionTop;
        filtersBtn.css('top', newTop);
        filtersSummary.css('top', newTop);
        filtersPanel.css('top', newTop);
      }
    } else {
      filtersSummary.css('top', newTop);
      filtersPanel.css('top', newTop);
      filtersBtn.css('top', newTop);
    }
  });
}