import { _ as _slicedToArray } from './slicedToArray-ca2c8b8d.js';
import React, { useState } from 'react';
import Accordion from 'react-bootstrap/Accordion';
import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
import { a as IoMdArrowDropdown } from './index.esm-3fdda599.js';
import './_commonjsHelpers-0c4b6f40.js';
import './web.dom.iterable-fdf034f5.js';
import './core.get-iterator-method-e903ff31.js';
import './iconBase-602d52fe.js';

var AccordionPanel = function AccordionPanel(props) {
  var accordionClassName = props.accordionClassName,
      data = props.data;

  var _useState = useState('0'),
      _useState2 = _slicedToArray(_useState, 2),
      activeAccordionKey = _useState2[0],
      setaAtiveAccordionKey = _useState2[1];

  var handleAccordion = function handleAccordion(id) {
    setaAtiveAccordionKey(id);
  };

  var CustomToggle = function CustomToggle(_ref) {
    var children = _ref.children,
        eventKey = _ref.eventKey;

    var decoratedOnClick = useAccordionToggle(eventKey, function () {
      return handleAccordion(eventKey);
    });
    return React.createElement(
      'div',
      { onMouseEnter: decoratedOnClick, className: 'accordion-head' },
      children
    );
  };

  return React.createElement(
    React.Fragment,
    null,
    data && data.length && React.createElement(
      Accordion,
      { defaultActiveKey: '0', activeKey: activeAccordionKey, className: accordionClassName },
      data.map(function (item) {
        return React.createElement(
          React.Fragment,
          null,
          React.createElement(
            CustomToggle,
            { key: item.id, eventKey: item.id },
            React.createElement(
              'a',
              { href: item.url },
              React.createElement(
                React.Fragment,
                null,
                item.title,
                item.subItems && React.createElement(IoMdArrowDropdown, null)
              )
            )
          ),
          React.createElement(
            Accordion.Collapse,
            { eventKey: item.id },
            React.createElement(
              'div',
              null,
              item.subItems && item.subItems.map(function (subItem) {
                return React.createElement(
                  'a',
                  { href: subItem.url },
                  React.createElement(
                    'div',
                    { key: subItem.id, className: 'accordion-sub-item' },
                    subItem.title
                  )
                );
              })
            )
          )
        );
      })
    )
  );
};

export default AccordionPanel;
