import {
  getContainerStyle,
  getComponentStyles
} from './style';



 function FloatingBord({memberAttr, container, component}) {
  const $container      = $(`[${memberAttr}="${container}"]`);
  const $component      = $container.find(`[${memberAttr}="${component}"]`);
  const $win            = $(window);

   const componentStyles = getComponentStyles();
  $component.css(componentStyles.fixing);

   const contianreStyle  = getContainerStyle($component.innerHeight());
  $container.css(contianreStyle);

   return {
    get isReady() {
      return (
        this.$container.length > 0 &&
        this.$component.length > 0 &&
        this.$win.length       > 0
      );
    },
    get $container() {
      return $container;
    },
    get $component() {
      return $component;
    },
    get $win() {
      return $win;
    },
    get isFloatingCondition() {
      return this._containerTop <= this._viewPortBottom - this._componentHeight;
    },
    get _viewPortBottom() {
      return this.$win.scrollTop() + this.$win.innerHeight();
    },
    get _componentHeight() {
      return this.$component.height();
    },
    get _containerTop() {
      return this.$container.offset().top;
    },
    set floating(floating) {
      this.$component.css(floating ? componentStyles.floating : componentStyles.fixing);
    }
  }
}



 export const FLOATING_BORD = {
  memberAttr: 'data-floating-component',
  container : 'container',
  component : 'component'
}



 export function setFloatingBord(options) {
  let   componentIsFloating = false;
  const bord                = FloatingBord(options);

  if (!bord.isReady) return;

  function _set(_floating) {
    return componentIsFloating = bord.floating = _floating;
  }

   _set(bord.isFloatingCondition);

   bord.$win.on('scroll.setFloatingBord', () =>
    componentIsFloating !== bord.isFloatingCondition && _set(bord.isFloatingCondition)
  );
}