function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import defaultStyle from './Popup.module.css';
import positionMapping from './__popupstylemapping';
import Button from '@zohodesk/base/es/Button/Button';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import popupCssJSLogic from './Popup.cssJSLogic';
import popupContentCssJsLogic from './PopupContent.cssJSLogic'; // MOM
// elements ref based rendering for fixed content and target (isAbsolutePositioningNeeded docs)
// customize the order of placements (customPositionOrder props related docs)
// content will be render in root level if needed related customizations (todo)
// expose target and content related element-rect-bound details
// loading cases if chunk related delay happens
// fixed-popup will be close hooks if document or any elements while scroll
// content area will be wrk based on configuration (absolute or fixed), He explained select component cases

export default function PopupSkeleton(props) {
  let {
    childrenWithPropsData,
    customStyle = {},
    tagGeneralAttributes,
    tagAttributes
  } = props;
  let styles = useMergeStyle(defaultStyle, customStyle);
  let classNames = popupCssJSLogic(props, styles); // tagname and component render support (skeleton custom) (todo)

  return /*#__PURE__*/React.createElement("div", _extends({}, tagGeneralAttributes, {
    className: classNames
  }, tagAttributes), childrenWithPropsData);
}
export function PopupTargetSkeleton(props) {
  let {
    children,
    getTargetRef,
    handleToggle,
    targetProps
  } = props;

  if (children) {
    const childrenWithPropsTarget = React.Children.map(children, (child, index) => {
      return /*#__PURE__*/React.cloneElement(child, props);
    });
    return /*#__PURE__*/React.createElement(React.Fragment, null, childrenWithPropsTarget);
  }

  return /*#__PURE__*/React.createElement(Button, _extends({
    tagGeneralAttributes: {
      ref: getTargetRef
    },
    tagAttributes: targetProps,
    onClick: e => {
      handleToggle(e);
    }
  }, props));
}
export function PopupContentSkeleton(props) {
  let {
    children,
    togglePopup,
    isPopupOpen,
    removeClose,
    position,
    arrowPosition,
    placement,
    color,
    size,
    getContainerRef,
    hasArrow,
    contentProps,
    customStyle,
    tagGeneralAttributes,
    tagAttributes
  } = props;
  let styles = useMergeStyle(defaultStyle, customStyle);
  let classNames = popupContentCssJsLogic(props, styles);
  let boxPosition = placement ? placement : position;
  const boxDirection = positionMapping[boxPosition].direction;
  arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
  boxPosition = positionMapping[boxPosition].positionStyle; // let contentSize = styles[size];
  // let colorStyle = styles[color];

  const renderChildren = React.Children.map(children, (child, i) => {
    return /*#__PURE__*/React.cloneElement(child, {
      key: i,
      isPopupOpen,
      togglePopup
    });
  });

  if (isPopupOpen) {
    return /*#__PURE__*/React.createElement("div", _extends({}, tagGeneralAttributes, contentProps, {
      ref: getContainerRef,
      className: `${styles.popupSubContainer} ${styles[boxPosition]} ${styles[boxDirection]}  ${styles[`arrow${boxDirection}`]}`,
      onClick: removeClose
    }, tagAttributes), /*#__PURE__*/React.createElement("div", {
      className: classNames
    }, hasArrow ? /*#__PURE__*/React.createElement("span", {
      className: styles[arrowPosition]
    }, /*#__PURE__*/React.createElement("span", {
      className: styles.arrowShape
    })) : null, renderChildren));
  }

  return null;
}