import React, { useCallback, useEffect, useRef, useState } from "react";
import { StyledChildrenWrapper, StyledCollapseExpandSingleIcon, StyledDividerLine, StyledTitle, StyledWrapper } from "./Styles";
import { Button } from "../Button";
export const EntitiesHeader = _ref => {
  let {
    onClick,
    title,
    children,
    expanded = true,
    readOnly = false,
    className
  } = _ref;
  const ref = useRef(null);
  const [open, setOpen] = useState(expanded || readOnly);
  useEffect(() => {
    setOpen(expanded || readOnly);
  }, [expanded, readOnly]);
  const handleOnClick = useCallback(() => {
    var _ref$current;
    (_ref$current = ref.current) == null || _ref$current.focus();
    setOpen(prev => !prev);
    if (onClick) onClick();
  }, [onClick]);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    className: className,
    tabIndex: 0,
    ref: ref,
    $expanded: open
  }, !readOnly ? /*#__PURE__*/React.createElement(Button, {
    variant: "text gray",
    size: "small",
    onClick: handleOnClick
  }, /*#__PURE__*/React.createElement(StyledCollapseExpandSingleIcon, {
    $expanded: open
  }), /*#__PURE__*/React.createElement(StyledTitle, {
    $readOnly: readOnly,
    color: "secondary",
    weight: "medium"
  }, title)) : /*#__PURE__*/React.createElement(StyledTitle, {
    $readOnly: readOnly,
    color: "secondary",
    weight: "medium"
  }, title), !open && /*#__PURE__*/React.createElement(StyledDividerLine, {
    "data-testid": "divider-line"
  }), open && /*#__PURE__*/React.createElement(StyledChildrenWrapper, null, children));
};
//# sourceMappingURL=EntitiesHeader.js.map