import React, { useRef, useEffect } from 'react';
import ADSponsoredResources from './ADSponsoredResources.js';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import LeftNav from './LeftNav.js';
import SideFooter from './SideFooter.js';
import { C as ConferenceBanner } from './ConferenceBanner-9162d0ca.js';
import PageFilter from './PageFilter.js';
import { m as main_43 } from './main-b5c5aac1.js';
import './slicedToArray-be2f7a22.js';
import './_commonjsHelpers-0c4b6f40.js';
import './web.dom.iterable-4109ff68.js';
import './es6.string.iterator-bc33758b.js';
import './_to-object-b50e61c3.js';
import './core.get-iterator-method-133dfacd.js';
import './AdSlot.js';
import './extends-60e0e1c6.js';
import './_object-pie-133f504a.js';
import 'prop-types';
import './index-888f9253.js';
import './debounce-533d9748.js';
import './isSymbol-a7e9aafe.js';
import './toNumber-5aeba6e7.js';
import './Beam.js';
import './stringify-59c8f690.js';
import './asyncToGenerator-7f8f9219.js';
import './_library-528f1934.js';
import './_iter-detect-7e5e5ce2.js';
import './Segment.js';
import 'react-bootstrap/ListGroup';
import './ADWebcast.js';
import './defineProperty-f5ff6f5a.js';
import './define-property-fe54dc9f.js';
import './react-social-icons-91f9716f.js';
import './get-3c308da4.js';
import './eq-bdcbf886.js';
import 'react-bootstrap';

var Column3 = function Column3(props) {
  var leftItems = props.leftItems,
      rightItems = props.rightItems,
      title = props.title,
      website = props.website,
      showFilter = props.showFilter,
      getParams = props.getParams,
      filters = props.filters,
      defaultFilter = props.defaultFilter,
      showRightAd = props.showRightAd,
      logo = props.logo;

  var adRef = useRef(null);

  useEffect(function () {
    if (!main_43 && window.innerWidth >= 768) {
      var navbar = document.querySelector('.navbar');
      var AdOffsetTop = adRef.current.getBoundingClientRect().top;
      window.addEventListener('scroll', function () {
        if (window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
          if (adRef.current && adRef.current.style) {
            adRef.current.style.position = 'fixed';
            adRef.current.style.top = '60px';
          }
        } else {
          if (adRef.current && adRef.current.style) {
            adRef.current.style.position = 'relative';
            adRef.current.style.top = '';
          }
        }
      });
    }
  }, []);

  return React.createElement(
    'section',
    null,
    React.createElement(
      Row,
      { className: 'justify-content-md-center' },
      React.createElement(
        Col,
        { md: true, className: 'leftCol', style: { width: '200px' } },
        React.createElement(LeftNav, { leftItems: leftItems }),
        website && website.sponsoredAd && React.createElement(ADSponsoredResources, { sponsoredAd: website.sponsoredAd }),
        website && website.sideFooterContent && website.sideFooterContent.length && website.showFooterOnLeftSide && React.createElement(SideFooter, { website: website, cache: website.cache, logo: logo })
      ),
      React.createElement(
        Col,
        { md: true, className: 'middleCol', style: { maxWidth: '640px', marginTop: !title && '10px' } },
        showFilter ? React.createElement(
          'div',
          { className: 'title-wrap' },
          React.createElement(
            'h1',
            { className: 'title' },
            title
          ),
          React.createElement(
            'div',
            { className: 'filter-box' },
            React.createElement(PageFilter, { getParams: getParams, filters: filters, defaultFilter: defaultFilter })
          )
        ) : title && React.createElement(
          'h1',
          { className: 'title' },
          title
        ),
        props.children
      ),
      React.createElement(
        'style',
        { jsx: 'true' },
        '\n            .filter-box {\n              float: right;\n              padding-top: 6px;\n              padding-right: 18px;\n            }\n            @media only screen and (min-width: 768px) {\n              .title-wrap {\n                display: flex;\n                justify-content: space-between;\n              }\n            }\n            @media only screen and (max-width: 767px) {\n              /* .filter-box {\n                float: right;\n                display: flex;\n                justify-content: flex-end;\n              } */\n              .title-wrap {\n                display: flex;\n                flex-direction: column;\n                margin-bottom: 10px;\n              }\n            }\n          '
      ),
      (!main_43 || showRightAd) && React.createElement(
        Col,
        { xs: 12, className: 'rightCol' },
        website && website.conferenceBannerContent && React.createElement(ConferenceBanner, { website: website }),
        React.createElement(
          'div',
          { ref: adRef },
          rightItems && rightItems.map(function (row, index) {
            return React.createElement(
              'div',
              { key: index },
              row.component
            );
          }),
          website && website.sideFooterContent && website.sideFooterContent.length && !website.showFooterOnLeftSide && React.createElement(SideFooter, { website: website, cache: website.cache, logo: logo })
        )
      )
    )
  );
};

export default Column3;
export { Column3 };
