import React__default from 'react';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

var RelatedTopicsDropdown = function RelatedTopicsDropdown(_ref) {
  var parentTaxonomy = _ref.parentTaxonomy,
      subTaxonomies = _ref.subTaxonomies,
      _ref$page = _ref.page,
      page = _ref$page === undefined ? '/' : _ref$page,
      _ref$exclude = _ref.exclude,
      exclude = _ref$exclude === undefined ? 'clinical' : _ref$exclude,
      _ref$variant = _ref.variant,
      variant = _ref$variant === undefined ? 'primary' : _ref$variant,
      _ref$className = _ref.className,
      className = _ref$className === undefined ? '' : _ref$className;

  /*
  Props accepted - parentTaxonomy(required, object), subTaxonomy(required, array), page(optional), exclude(optional), variant(optional), className(optional)
  example:
  <RelatedTopicDropdown
      page='/clinical'
      exclude="clinical"
      className='mb-3'
      parentTaxonomy={props.parentTaxonomy}
      subTaxonomies={props.subTaxonomies}
  />
  */
  if (subTaxonomies.length === 0 && parentTaxonomy) {
    if (parentTaxonomy.identifier == exclude) {
      return '';
    }
    return React__default.createElement(
      'div',
      null,
      React__default.createElement(
        'style',
        { jsx: true },
        '\n          #related_dropdown > .dropdown > .dropdown-menu.show {\n            position: absolute;\n            top: auto !important;\n            max-height: 50vh !important;\n            box-shadow: 0px 0px 25px #ccc;\n            z-index: 9999;\n            transform: none !important;\n            overflow: hidden;\n            overflow-y: scroll;\n          }\n          @media only screen and (max-width: 720px) {\n            #related_dropdown > .dropdown > .dropdown-menu.show {\n              position: absolute;\n              max-height: 30vh !important;\n              max-width: 95vw;\n              box-shadow: 0px 0px 25px #ccc;\n              z-index: 9999;\n              font-size: 0.85em;\n              overflow: hidden;\n              overflow-y: scroll;\n            }\n          }\n        '
      ),
      React__default.createElement(
        'div',
        { id: 'related_dropdown', className: className },
        React__default.createElement(
          DropdownButton,
          { id: 'related_button', variant: variant, title: 'Related Topics' },
          React__default.createElement(
            Dropdown.Item,
            { href: parentTaxonomy.identifier },
            parentTaxonomy.name
          )
        )
      )
    );
  } else {
    return React__default.createElement(
      'div',
      null,
      React__default.createElement(
        'style',
        { jsx: true },
        '\n          #related_dropdown > .dropdown > .dropdown-menu.show {\n            position: absolute;\n            top: auto !important;\n            max-height: 40vh !important;\n            z-index: 9999;\n            transform: none !important;\n            overflow: hidden;\n            overflow-y: scroll;\n          }\n          @media only screen and (max-width: 720px) {\n            #related_dropdown > .dropdown > .dropdown-menu.show {\n              position: absolute;\n              max-height: 30vh !important;\n              max-width: 95vw;\n              z-index: 9999;\n              font-size: 0.85em;\n              overflow: hidden;\n              overflow-y: scroll;\n            }\n          }\n        '
      ),
      React__default.createElement(
        'div',
        { id: 'related_dropdown', className: className },
        React__default.createElement(
          DropdownButton,
          { id: 'related_button', variant: variant, title: 'Related Topics' },
          subTaxonomies.length > 0 && subTaxonomies.map(function (taxonomy, index) {
            return React__default.createElement(
              Dropdown.Item,
              { key: index, href: page + '/' + taxonomy.identifier },
              taxonomy.name
            );
          })
        )
      )
    );
  }
};

export { RelatedTopicsDropdown as default };
