import React from "react";
import Svg, { Path } from "react-native-svg";
import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
import { getIcon } from "@jobber/design";
import { useAtlantisTheme } from "../AtlantisThemeContext";

export interface IconProps {
  /** The icon to show.  */
  readonly name: IconNames;

  /**
   * Changes the size to small or large.
   * @default base
   */
  readonly size?: IconSizes;

  /**
   * Determines the color of the icon. If not specified, some icons have a default system colour
   * like quotes, jobs, and invoices.
   * Others that don't have a system colour fall back to greyBlue.
   */
  readonly color?: IconColorNames;

  /**
   * Sets a custom color for the icon. Can be a rgb() or hex value.
   */
  readonly customColor?: string;

  /**
   * Used to locate this view in end-to-end tests
   */
  readonly testID?: string;
}

export function Icon({
  name,
  color,
  size = "base",
  customColor,
  testID,
}: IconProps) {
  const { tokens } = useAtlantisTheme();
  const { svgStyle, paths, viewBox } = getIcon({
    name,
    color,
    customColor,
    size,
    platform: "mobile",
    format: "js",
    tokens,
  });

  // Paths with their own fill are static artwork; only unfilled paths take
  // the themed color and customColor.
  // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
  const icon = (paths ?? []).map(path => (
    <Path
      key={path.d}
      d={path.d}
      fill={path.fill ?? (customColor || svgStyle.fill)}
      fillOpacity={path.fillOpacity}
      opacity={path.opacity}
    />
  ));

  return (
    <Svg
      style={{ ...svgStyle, display: "flex" }}
      testID={testID || name}
      viewBox={viewBox}
    >
      {icon}
    </Svg>
  );
}