import React, { forwardRef } from "react";
import classNames from "classnames";
import * as Icons from "./svg";
import {
  BrandIconComponentMap,
  BrandIconNameEnum,
  BrandIconName,
  BrandIconSVGElement,
  BrandIconSize,
  brandIconSizeMap,
} from "./types";

/**
 * @deprecated
 */
export const BRAND_ICON_MAP: BrandIconComponentMap = {
  [BrandIconNameEnum.confluence]: Icons.BrandIconSVGConfluence,
  [BrandIconNameEnum.conveyor_ai]: Icons.BrandIconSVGConveyorAI,
  [BrandIconNameEnum.conveyor]: Icons.BrandIconSVGConveyor,
  [BrandIconNameEnum.front]: Icons.BrandIconSVGFront,
  [BrandIconNameEnum.google_drive]: Icons.BrandIconSVGGoogleDrive,
  [BrandIconNameEnum.jira]: Icons.BrandIconSVGJira,
  [BrandIconNameEnum.microsoft_teams]: Icons.BrandIconSVGMicrosoftTeams,
  [BrandIconNameEnum.notion]: Icons.BrandIconSVGNotion,
  [BrandIconNameEnum.salesforce]: Icons.BrandIconSVGSalesforce,
  [BrandIconNameEnum.slack]: Icons.BrandIconSVGSlack,
  [BrandIconNameEnum.zendesk]: Icons.BrandIconSVGZendesk,
};

type BrandIconProps = React.HTMLAttributes<HTMLSpanElement> & {
  name: BrandIconName;
  size?: BrandIconSize;
  className?: string;
  style?: React.CSSProperties;
};

/**
 * @deprecated
 */
export const BrandIcon = forwardRef<HTMLSpanElement, BrandIconProps>(
  function BrandIcon(props, ref) {
    const { name, size = "md", className, style, ...rest } = props;

    const iconSize = brandIconSizeMap[size];
    const svgSize = iconSize * 0.8;

    const SvgIconComponent: BrandIconSVGElement = BRAND_ICON_MAP[name];

    if (!SvgIconComponent) {
      if (process.env.NODE_ENV !== "production") {
        console.warn(`Brand Icon "${name}" not found`);
      }
      return null;
    }

    return (
      <span
        ref={ref}
        className={classNames(
          "inline-flex items-center justify-center",
          className,
        )}
        style={{
          width: iconSize,
          height: iconSize,
          ...style,
        }}
        {...rest}
      >
        <SvgIconComponent
          fill="currentColor"
          width={svgSize}
          height={svgSize}
          role="img"
          focusable="false"
          aria-hidden="true"
        />
      </span>
    );
  },
);