import React from "react";

import styles from "./Popup.module.css";
import constantProps from "./Popup.constantProps";
import popupPropTypes, {
  defaultProps,
  propsDescription,
  popupContentDefaultProps
} from "./Popup.propTypes";
import childrenWithProps from "./Popup.ComputeProps";
import { positionMapping } from "./__popupstylemapping.json";
import Button from "../button/Button";
export default function PopupSkeleton(props) {
  let { childrenWithPropsData } = props;
  return <div className={styles.popupContainer}>{childrenWithPropsData}</div>;
}

export function PopupTargetSkeleton(props) {
  let { children, togglePopup, isPopupOpen, removeClose, getTargetRef } = props;

  if (children) {
    const childrenWithPropsTarget = React.Children.map(
      children,
      (child, index) => {
        return React.cloneElement(child, props);
      }
    );
    return <>{childrenWithPropsTarget}</>;
  }
  return <Button ref={getTargetRef} onClick={togglePopup} {...props} />;
}

export function PopupContentSkeleton(props) {
  let {
    children,
    togglePopup,
    isPopupOpen,
    removeClose,
    position,
    arrowPosition,
    placement,
    color,
    size,
    getContainerRef
  } = props;
  console.log(placement, position, "sdad");
  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];
  if (children) {
    return <>{children}</>;
  } else if (isPopupOpen && !children) {
    return (
      <div
        ref={getContainerRef}
        className={`${styles.popupSubContainer} ${styles[boxPosition]} ${
          styles[boxDirection]
        }  ${styles[`arrow${boxDirection}`]}`}
        onClick={removeClose}
      >
        <div className={`${styles.popup} ${contentSize} ${colorStyle}`}>
          <span className={styles[arrowPosition]}>
            <span className={styles.arrowShape} />
          </span>
        </div>
        {children}
      </div>
    );
  }
  return null;
}
