import React from "react";

export function getCardStyle(
  side: string,
  extendSides?: {
    [key: string]: React.CSSProperties;
  }
): React.CSSProperties {
  const sideStyle = extendSides?.[side] || {};

  if (Object.keys(sideStyle).length > 0) {
    return sideStyle;
  }

  switch (side) {
    case "top":
      return {
        transform: `translate(-50%, 0)`,
        left: "50%",
        bottom: "100%",
        marginBottom: "8px",
      };
    case "bottom":
      return {
        transform: `translate(-50%, 0)`,
        left: "50%",
        top: "100%",
        marginTop: "8px",
      };
    case "left":
      return {
        transform: `translate(0, -50%)`,
        right: "100%",
        top: "50%",
        marginRight: "8px",
      };
    case "right":
      return {
        transform: `translate(0, -50%)`,
        left: "100%",
        top: "50%",
        marginLeft: "8px",
      };
    case "top-left":
      return {
        bottom: "100%",
        marginBottom: "8px",
      };
    case "top-right":
      return {
        right: 0,
        bottom: "100%",
        marginBottom: "8px",
      };
    case "bottom-left":
      return {
        top: "100%",
        marginTop: "8px",
      };
    case "bottom-right":
      return {
        right: 0,
        top: "100%",
        marginTop: "8px",
      };
    case "right-bottom":
      return {
        left: "100%",
        bottom: 0,
        marginLeft: "8px",
      };
    case "right-top":
      return {
        left: "100%",
        top: 0,
        marginLeft: "8px",
      };
    case "left-bottom":
      return {
        right: "100%",
        bottom: 0,
        marginRight: "8px",
      };
    case "left-top":
      return {
        right: "100%",
        top: 0,
        marginRight: "8px",
      };

    default:
      // Default case if no side is specified. Center the card to the screen
      return {
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)", // Center the card
        position: "fixed", // Make sure it's positioned relative to the viewport
        margin: "0",
      };
  }
}

export const getArrowStyle: (side: string) => React.CSSProperties = (
  side: string
) => {
  switch (side) {
    case "bottom":
      return {
        transform: `translate(-50%, 0) rotate(270deg)`,
        left: "50%",
        top: "-23px",
      };
    case "top":
      return {
        transform: `translate(-50%, 0) rotate(90deg)`,
        left: "50%",
        bottom: "-23px",
      };
    case "right":
      return {
        transform: `translate(0, -50%) rotate(180deg)`,
        top: "50%",
        left: "-23px",
      };
    case "left":
      return {
        transform: `translate(0, -50%) rotate(0deg)`,
        top: "50%",
        right: "-23px",
      };
    case "top-left":
      return {
        transform: `rotate(90deg)`,
        left: "10px",
        bottom: "-23px",
      };
    case "top-right":
      return {
        transform: `rotate(90deg)`,
        right: "10px",
        bottom: "-23px",
      };
    case "bottom-left":
      return {
        transform: `rotate(270deg)`,
        left: "10px",
        top: "-23px",
      };
    case "bottom-right":
      return {
        transform: `rotate(270deg)`,
        right: "10px",
        top: "-23px",
      };
    case "right-bottom":
      return {
        transform: `rotate(180deg)`,
        left: "-23px",
        bottom: "10px",
      };
    case "right-top":
      return {
        transform: `rotate(180deg)`,
        left: "-23px",
        top: "10px",
      };
    case "left-bottom":
      return {
        transform: `rotate(0deg)`,
        right: "-23px",
        bottom: "10px",
      };
    case "left-top":
      return {
        transform: `rotate(0deg)`,
        right: "-23px",
        top: "10px",
      };
    default:
      return {}; // Default case if no side is specified
  }
};