import { css, keyframes } from "@emotion/react";
import type { Ref } from "react";
import type { PopoverProps } from "react-aria-components";
import { Popover as AriaPopover } from "react-aria-components";

import { PORTALED_OVERLAY_Z_INDEX } from "@phoenix/components/core/zIndex";
import { classNames } from "@phoenix/utils/classNames";

const popoverSlideKeyframes = keyframes`
 100% {
  from {
     transform: var(--origin);
     opacity: 0;
   }

   to {
     transform: translateY(0);
     opacity: 1;
   }
  }
`;

const popoverCSS = css`
  box-sizing: border-box;
  --background-color: var(--global-popover-background-color);
  transition:
    transform 200ms,
    opacity 200ms;
  border: 1px solid var(--global-popover-border-color);
  box-shadow: 0px 8px 16px var(--global-overlay-shadow-color);
  border-radius: var(--global-rounding-small);
  background: var(--background-color);
  color: var(--global-text-color-900);
  outline: none;
  z-index: ${PORTALED_OVERLAY_Z_INDEX};

  &[data-entering],
  &[data-exiting] {
    transform: var(--origin);
    opacity: 0;
  }

  .react-aria-OverlayArrow svg {
    display: block;
    fill: var(--background-color);
    stroke: var(--global-border-color-default);
    stroke-width: 1px;
  }

  &[data-trigger="Select"] {
    min-width: var(--trigger-width);
  }

  &[data-placement="top"] {
    --origin: translateY(8px);

    &:has(.react-aria-OverlayArrow) {
      margin-bottom: 6px;
    }
  }

  &[data-placement="bottom"] {
    --origin: translateY(-8px);

    &:has(.react-aria-OverlayArrow) {
      margin-top: 4px;
    }

    .react-aria-OverlayArrow svg {
      transform: rotate(180deg);
    }
  }

  &[data-placement="right"] {
    --origin: translateX(-8px);

    &:has(.react-aria-OverlayArrow) {
      margin-left: 6px;
    }

    .react-aria-OverlayArrow svg {
      transform: rotate(90deg);
    }
  }

  &[data-placement="left"] {
    --origin: translateX(8px);

    &:has(.react-aria-OverlayArrow) {
      margin-right: 6px;
    }

    .react-aria-OverlayArrow svg {
      transform: rotate(-90deg);
    }
  }

  &[data-entering] {
    animation: ${popoverSlideKeyframes} 200ms;
  }

  &[data-exiting] {
    animation: ${popoverSlideKeyframes} 200ms reverse ease-in;
  }

  .react-aria-Dialog {
    outline: none;
  }

  & div[role="listbox"] {
    padding: var(--global-dimension-size-25);
  }
`;

function Popover({
  ref,
  ...props
}: PopoverProps & { ref?: Ref<HTMLDivElement> }) {
  return (
    <AriaPopover
      {...props}
      ref={ref}
      className={classNames("popover react-aria-Popover", props.className)}
      css={popoverCSS}
    />
  );
}

export { Popover };
export type { PopoverProps };
