"use client";

import cx from "classnames";
import React, { useContext } from "react";
import { SpritePathContext } from "./SpritePathContext";

export type IconColor = "info" | "success" | "warning" | "danger" | "orange";
export type IconSize =
  | "small"
  | "medium"
  | "large"
  | "xlarge"
  | "xxlarge"
  | "huge";
export type IconType = "icon" | "pictogram";

export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
  /** Accessible label for the icon. */
  alt?: string;
  /** Icon color. */
  color?: IconColor;
  /** Icon name (required). */
  name: string;
  /** Icon size. */
  size?: IconSize;
  /** Path to the SVG sprite. */
  spritePath?: string;
  /**
   * Icon type. When set to "pictogram", the component will automatically
   * switch between light and dark versions based on theme classes (.is-light/.is-dark).
   */
  type?: IconType;
  /**
   * @deprecated Use type="pictogram" instead.
   * Whether this icon should adapt to theme (light/dark).
   * When true, the component will automatically switch between
   * light and dark versions based on theme classes (.is-light/.is-dark).
   */
  className?: string;
}

const CLASS_ROOT = "icon";

const Icon: React.FC<IconProps> = ({
  className,
  alt,
  color,
  name,
  size,
  spritePath = "/sprite.svg",
  type = "icon",
  ...other
}) => {
  const contextPath = useContext(SpritePathContext);

  const isPictogram = type === "pictogram";

  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--${size}`]: size,
      [`${CLASS_ROOT}--${color}`]: color,
      [`${CLASS_ROOT}--pictogram`]: isPictogram,
    },
    className,
  );

  // For theme-aware icons, we need to render both light and dark versions
  if (isPictogram) {
    const finalSpritePath =
      spritePath !== "/sprite.svg" || typeof contextPath === "undefined"
        ? spritePath
        : contextPath;

    return (
      <svg
        className={classes}
        aria-hidden={alt !== undefined ? undefined : "true"}
        role={alt !== undefined ? "img" : undefined}
        {...other}
      >
        {alt !== undefined && alt.length > 0 && <title>{alt}</title>}
        {/* Light theme version (default) */}
        <use
          className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--light`}
          xlinkHref={`${finalSpritePath}#${name}`}
        />
        {/* Dark theme version */}
        <use
          className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--dark`}
          xlinkHref={`${finalSpritePath}#${name}--dark`}
        />
      </svg>
    );
  }

  // Regular icon rendering (existing behavior)
  return (
    <svg
      className={classes}
      aria-hidden={alt !== undefined ? undefined : "true"}
      role={alt !== undefined ? "img" : undefined}
      {...other}
    >
      {alt !== undefined && alt.length > 0 && <title>{alt}</title>}
      <use
        xlinkHref={
          spritePath !== "/sprite.svg" || typeof contextPath === "undefined"
            ? `${spritePath}#${name}`
            : `${contextPath}#${name}`
        }
      />
    </svg>
  );
};

Icon.displayName = "Icon";

export { Icon };