import { css } from "@emotion/react";
import type { PropsWithChildren } from "react";

import { Text } from "@phoenix/components";
import { Truncate } from "@phoenix/components/core/utility/Truncate";

/**
 * Component that renders a small preview of the plot item
 */
export type ColorPreviewShape = "line" | "circle" | "square";

type ChartTooltipProps = PropsWithChildren<object>;

/**
 * A styled wrapper for chart tooltips
 */
export function ChartTooltip(props: ChartTooltipProps) {
  return (
    <div
      css={css`
        background-color: var(--global-color-gray-200);
        border: 1px solid var(--global-color-gray-300);
        padding: var(--global-dimension-size-100);
        border-radius: var(--global-rounding-medium);
        display: flex;
        flex-direction: column;
        gap: var(--global-dimension-size-50);
        min-width: 200px;
        max-width: 300px;
        box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
      `}
    >
      {props.children}
    </div>
  );
}

type ChartTooltipItemProps = {
  /**
   * The shape of the color preview
   * @default "line"
   */
  shape?: ColorPreviewShape;
  /**
   * The color of the preview item. Recharts payload entries may omit the
   * color, in which case the preview swatch renders transparent.
   * @default "transparent"
   */
  color?: string;
  name: string;
  value: string;
};

/**
 * Renders a single item in a chart tooltip
 */
export function ChartTooltipItem(props: ChartTooltipItemProps) {
  return (
    <div
      css={css`
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: var(--global-dimension-size-200);
      `}
    >
      <div
        css={css`
          display: flex;
          flex-direction: row;
          gap: var(--global-dimension-size-100);
          align-items: center;
          min-width: 0;
        `}
      >
        <PreviewShape
          color={props.color ?? "transparent"}
          shape={props.shape ?? "line"}
        />
        <Text title={props.name} minWidth={0}>
          <Truncate maxWidth="100%">{props.name}</Truncate>
        </Text>
      </div>
      <Text>{props.value}</Text>
    </div>
  );
}

export function ChartTooltipDivider() {
  return (
    <div
      css={css`
        height: 1px;
        background-color: var(--global-color-gray-300);
        width: 100%;
      `}
    />
  );
}

const colorPreviewCSS = (previewShape: ColorPreviewShape) => {
  if (previewShape === "line") {
    return css`
      width: 8px;
      height: 2px;
    `;
  } else if (previewShape === "circle") {
    return css`
      width: 8px;
      height: 8px;
      border-radius: 50%;
    `;
  } else if (previewShape === "square") {
    return css`
      width: 8px;
      height: 8px;
    `;
  }
  return undefined;
};

type PreviewShapeProps = {
  /**
   * The color of the shape
   */
  color: string;
  shape?: ColorPreviewShape;
};

/**
 * A small preview of a chart color
 */
function PreviewShape({ color, shape = "line" }: PreviewShapeProps) {
  return (
    <div
      css={css(
        colorPreviewCSS(shape),
        css`
          background-color: ${color};
          flex: none;
        `
      )}
    />
  );
}
