import React, { useContext, useCallback, useMemo } from "react";
import classnames from "classnames";
import { AccordionContext } from "./Accordion";
import { ItemContext } from "./AccordionItem";
import { StyledAccordionItemHead, StyledAccordionItemHeadText, StyledAccordionItemHeadIcon } from "./Styles";
import CollapseExpandSingleIcon from "../Icons/collection/CollapseExpandSingle";
export const AccordionItemHead = _ref => {
  let {
    children,
    className
  } = _ref;
  const accordionContext = useContext(AccordionContext);
  const itemContext = useContext(ItemContext);
  const {
    toggleExpanded,
    disableToggleIcon,
    customToggleIcon
  } = useMemo(() => {
    return {
      toggleExpanded: accordionContext ? accordionContext.toggleExpanded : null,
      disableToggleIcon: accordionContext ? accordionContext.disableToggleIcon : false,
      customToggleIcon: accordionContext ? accordionContext.customToggleIcon : null
    };
  }, [accordionContext]);
  const id = useMemo(() => itemContext ? itemContext.id : "", [itemContext]);
  const onClickCallback = useCallback(() => {
    if (toggleExpanded) {
      toggleExpanded(id);
    }
  }, [id, toggleExpanded]);
  const toggleIcon = useMemo(() => customToggleIcon ? customToggleIcon : /*#__PURE__*/React.createElement(CollapseExpandSingleIcon, {
    style: {
      transform: "rotate(180deg)"
    }
  }), [customToggleIcon]);
  return /*#__PURE__*/React.createElement(StyledAccordionItemHead, {
    onClick: onClickCallback,
    className: classnames("accordionItemHead", className)
  }, /*#__PURE__*/React.createElement(StyledAccordionItemHeadText, {
    className: "accordionItemHead__text"
  }, children), /*#__PURE__*/React.createElement(StyledAccordionItemHeadIcon, {
    className: "accordionItemHead__icon"
  }, !disableToggleIcon ? toggleIcon : null));
};
AccordionItemHead.displayName = "AccordionItemHead";
//# sourceMappingURL=AccordionItemHead.js.map