import * as DialogPrimitive from "@radix-ui/react-dialog";

import { styled, keyframes } from "../../theme";
import { pxToRem } from "../../utils";

const overlayShow = keyframes({
  "0%": { opacity: 0 },
  "100%": { opacity: 1 },
});

export const StyledDialog = styled(DialogPrimitive.Root);

export const StyledTrigger = styled(DialogPrimitive.Trigger);

export const StyledPortal = styled(DialogPrimitive.Portal);

export const StyledOverlay = styled(DialogPrimitive.Overlay, {
  backgroundColor: "transparent",
  position: "fixed",
  inset: 0,
  variants: {
    opaque: {
      true: {
        backgroundColor: "rgba(0, 0, 0, 0.7)",
        "@media (prefers-reduced-motion: no-preference)": {
          animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
        },
      },
    },
  },
});

export const Content = styled(DialogPrimitive.Content, {});

export const StyledContent = styled("div", {
  overflowY: "auto",
  pos: "relative",
  bg: "$dark-chromia-dark",
  color: "$dark-off-white",
  p: "$4 $6",
  borderRadius: "$xs",
  variants: {
    side: {
      center: {
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        maxHeight: "100%",
      },
      left: { position: "fixed", top: 0, left: 0, height: "100%" },
      right: { position: "fixed", top: 0, right: 0, height: "100%" },
      topCenter: {
        position: "fixed",
        top: 0,
        left: "50%",
        transform: "translateX(-50%)",
        width: "100%",
        maxHeight: "100%",
      },
      bottomCenter: {
        position: "fixed",
        top: "100%",
        left: "50%",
        transform: "translate(-50%, -100%)",
        width: "100%",
        maxHeight: "100%",
      },
    },
  },
});

export const StyledTitle = styled(DialogPrimitive.Title, {
  variants: {
    centerTitle: {
      true: {
        position: "absolute",
        left: "50%",
        transform: "translateX(-50%)",
      },
    },
  },
});

export const StyledDescription = styled(DialogPrimitive.Description);

export const StyledClose = styled(DialogPrimitive.Close, { ml: "auto" });

export const StyledHeader = styled("header", {
  position: "relative",
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  height: pxToRem(80),
  px: "$6",

  "@s": {
    height: pxToRem(60),
    px: "$4",
  },
});