import React, { forwardRef, ReactNode } from "react";
import classNames from "classnames";
import { bemHOF } from "../../utilities";
import { Box } from "../Box";
import { IntegrationLogo } from "../IntegrationLogo";

export interface ChipProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

const cn = bemHOF("Chip");

export const ChipDefault = forwardRef<HTMLDivElement, ChipProps>(function Chip(
  { children, className, style },
  ref,
) {
  return (
    <Box
      as="span"
      ref={ref}
      style={style}
      className={classNames(cn(), cn({ m: "default" }), className)}
    >
      {children}
    </Box>
  );
});

// Only pulling in integrations that are needed from IntegrationLogoName
const integrationNames = [
  "front",
  "jira",
  "salesforce",
  "service_now",
  "slack",
  "zendesk",
] as const;
export const ChipIntegration = forwardRef<
  HTMLDivElement,
  ChipProps & {
    integration: typeof integrationNames[number];
  }
>(function ChipIntegration({ children, integration, className, style }, ref) {
  const integrationClassNames = {
    front: "text-[#a857f1] bg-[#a857f1]/15",
    jira: "text-[#2684ff] bg-[#2684ff]/15",
    salesforce: "text-blue-400 bg-blue-300/15",
    service_now: "text-[#62d84e] bg-[#62d84e]/10",
    slack: "text-[#4a154b] bg-[#4a154b]/15",
    zendesk: "text-[#04363d] bg-[#04363d]/5",
  };

  return (
    <Box
      as="span"
      ref={ref}
      style={style}
      className={classNames(
        cn(),
        integrationClassNames[integration],
        className,
      )}
    >
      <IntegrationLogo
        className="flex-shrink-0"
        logo={integration}
        square
        width={12}
        height={12}
      />
      {children}
    </Box>
  );
});

// eslint-disable-next-line prefer-object-spread
export const Chip = Object.assign({}, ChipDefault, {
  Integration: ChipIntegration,
});