import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bem } from "../../utilities/bem";

const cn = "SpeechBubble";

export type SpeechBubblePlacement =
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end";

export interface SpeechBubbleProps extends BoxProps {
  /**
   * data-placement attribute is deprecated, use placement instead
   */
  "data-placement"?: SpeechBubblePlacement;
  /**
   * Tell the speech bubble where to place the arrow
   */
  placement?: SpeechBubblePlacement;
}

/**
 * @deprecated
 */
export const SpeechBubble = (props: SpeechBubbleProps) => {
  const {
    "data-placement": dataPlacement = "top-start",
    placement,
    className,
    ...rest
  } = props;

  const ref = React.useRef<HTMLDivElement>(null);

  React.useLayoutEffect(() => {
    if (ref.current) {
      const style = window.getComputedStyle(ref.current);
      ref.current.style.setProperty(
        "--ads-speech-bubble-bg",
        style.backgroundColor,
      );
    }
  }, [ref]);

  return (
    <Box
      ref={ref}
      className={classNames(bem(cn), className)}
      data-placement={placement || dataPlacement}
      {...rest}
    />
  );
};