import React, { forwardRef, useContext, HTMLAttributes } from "react";
import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library, FlipProp } from "@fortawesome/fontawesome-svg-core";

// far
import { faEnvelope as faEnvelopeRegular } from "@fortawesome/free-regular-svg-icons/faEnvelope";
import { faFileAlt } from "@fortawesome/free-regular-svg-icons/faFileAlt";
import { faQuestionCircle as faQuestionCircleRegular } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons/faUser";
import { faCheckCircle as faCheckCircleRegular } from "@fortawesome/free-regular-svg-icons/faCheckCircle";
import { faCircle as faCircleRegular } from "@fortawesome/free-regular-svg-icons/faCircle";
import { faTimesCircle as faTimesCircleRegular } from "@fortawesome/free-regular-svg-icons/faTimesCircle";
import { faClock } from "@fortawesome/free-regular-svg-icons/faClock";
import { faKeyboard } from "@fortawesome/free-regular-svg-icons/faKeyboard";
import { faStar } from "@fortawesome/free-regular-svg-icons/faStar";
import { faThumbsDown as faThumbsDownRegular } from "@fortawesome/free-regular-svg-icons/faThumbsDown";
import { faThumbsUp as faThumbsUpRegular } from "@fortawesome/free-regular-svg-icons/faThumbsUp";
import { faCopy as faCopyRegular } from "@fortawesome/free-regular-svg-icons/faCopy";

// fas
import { faArchive } from "@fortawesome/free-solid-svg-icons/faArchive";
import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
import { faArrowsAlt } from "@fortawesome/free-solid-svg-icons/faArrowsAlt";
import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp";
import { faBackward } from "@fortawesome/free-solid-svg-icons/faBackward";
import { faBalanceScale } from "@fortawesome/free-solid-svg-icons/faBalanceScale";
import { faBan } from "@fortawesome/free-solid-svg-icons/faBan";
import { faBandAid } from "@fortawesome/free-solid-svg-icons/faBandAid";
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
import { faBatteryHalf } from "@fortawesome/free-solid-svg-icons/faBatteryHalf";
import { faBed } from "@fortawesome/free-solid-svg-icons/faBed";
import { faBell } from "@fortawesome/free-solid-svg-icons/faBell";
import { faBell as faBellRegular } from "@fortawesome/free-regular-svg-icons/faBell";
import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
import { faBellSlash as faBellSlashRegular } from "@fortawesome/free-regular-svg-icons/faBellSlash";
import { faBiohazard } from "@fortawesome/free-solid-svg-icons/faBiohazard";
import { faBirthdayCake } from "@fortawesome/free-solid-svg-icons/faBirthdayCake";
import { faBold } from "@fortawesome/free-solid-svg-icons/faBold";
import { faBolt } from "@fortawesome/free-solid-svg-icons/faBolt";
import { faBook } from "@fortawesome/free-solid-svg-icons/faBook";
import { faBox } from "@fortawesome/free-solid-svg-icons/faBox";
import { faBroom } from "@fortawesome/free-solid-svg-icons/faBroom";
import { faBug } from "@fortawesome/free-solid-svg-icons/faBug";
import { faBullhorn } from "@fortawesome/free-solid-svg-icons/faBullhorn";
import { faBullseye } from "@fortawesome/free-solid-svg-icons/faBullseye";
import { faCalculator } from "@fortawesome/free-solid-svg-icons/faCalculator";
import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { faCaretUp } from "@fortawesome/free-solid-svg-icons/faCaretUp";
import { faChartBar } from "@fortawesome/free-solid-svg-icons/faChartBar";
import { faChartLine } from "@fortawesome/free-solid-svg-icons/faChartLine";
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCheckSquare } from "@fortawesome/free-solid-svg-icons/faCheckSquare";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
import { faCircle } from "@fortawesome/free-solid-svg-icons/faCircle";
import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
import { faClipboard } from "@fortawesome/free-solid-svg-icons/faClipboard";
import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons/faClipboardCheck";
import { faClock as faClockSolid } from "@fortawesome/free-solid-svg-icons/faClock";
import { faClone } from "@fortawesome/free-solid-svg-icons/faClone";
import { faCloudDownloadAlt } from "@fortawesome/free-solid-svg-icons/faCloudDownloadAlt";
import { faCloudShowersHeavy } from "@fortawesome/free-solid-svg-icons/faCloudShowersHeavy";
import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons/faCloudUploadAlt";
import { faCodeBranch } from "@fortawesome/free-solid-svg-icons/faCodeBranch";
import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
import { faColumns } from "@fortawesome/free-solid-svg-icons/faColumns";
import { faCommentAlt } from "@fortawesome/free-solid-svg-icons/faCommentAlt";
import { faCompass } from "@fortawesome/free-solid-svg-icons/faCompass";
import { faCompress } from "@fortawesome/free-solid-svg-icons/faCompress";
import { faCompressArrowsAlt } from "@fortawesome/free-solid-svg-icons/faCompressArrowsAlt";
import { faCopy as faCopySolid } from "@fortawesome/free-solid-svg-icons/faCopy";
import { faCrosshairs } from "@fortawesome/free-solid-svg-icons/faCrosshairs";
import { faCrown } from "@fortawesome/free-solid-svg-icons/faCrown";
import { faDoorClosed } from "@fortawesome/free-solid-svg-icons/faDoorClosed";
import { faDoorOpen } from "@fortawesome/free-solid-svg-icons/faDoorOpen";
import { faDownload } from "@fortawesome/free-solid-svg-icons/faDownload";
import { faDungeon } from "@fortawesome/free-solid-svg-icons/faDungeon";
import { faEdit } from "@fortawesome/free-solid-svg-icons/faEdit";
import { faEllipsisH } from "@fortawesome/free-solid-svg-icons/faEllipsisH";
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons/faEnvelope";
import { faEnvelopeOpenText } from "@fortawesome/free-solid-svg-icons/faEnvelopeOpenText";
import { faEraser } from "@fortawesome/free-solid-svg-icons/faEraser";
import { faExchangeAlt } from "@fortawesome/free-solid-svg-icons/faExchangeAlt";
import { faExclamation } from "@fortawesome/free-solid-svg-icons/faExclamation";
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
import { faExpand } from "@fortawesome/free-solid-svg-icons/faExpand";
import { faExpandArrowsAlt } from "@fortawesome/free-solid-svg-icons/faExpandArrowsAlt";
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
import { faExternalLinkSquareAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkSquareAlt";
import { faEye } from "@fortawesome/free-solid-svg-icons/faEye";
import { faEyeSlash } from "@fortawesome/free-solid-svg-icons/faEyeSlash";
import { faFastBackward } from "@fortawesome/free-solid-svg-icons/faFastBackward";
import { faFastForward } from "@fortawesome/free-solid-svg-icons/faFastForward";
import { faFeatherAlt } from "@fortawesome/free-solid-svg-icons/faFeatherAlt";
import { faFile } from "@fortawesome/free-solid-svg-icons/faFile";
import { faFileAlt as faFileAltSolid } from "@fortawesome/free-solid-svg-icons/faFileAlt";
import { faFileExport } from "@fortawesome/free-solid-svg-icons/faFileExport";
import { faFileImport } from "@fortawesome/free-solid-svg-icons/faFileImport";
import { faFileSignature } from "@fortawesome/free-solid-svg-icons/faFileSignature";
import { faFillDrip } from "@fortawesome/free-solid-svg-icons/faFillDrip";
import { faFilter } from "@fortawesome/free-solid-svg-icons/faFilter";
import { faFlag } from "@fortawesome/free-solid-svg-icons/faFlag";
import { faFlask } from "@fortawesome/free-solid-svg-icons/faFlask";
import { faFolder } from "@fortawesome/free-solid-svg-icons/faFolder";
import { faFolderOpen } from "@fortawesome/free-solid-svg-icons/faFolderOpen";
import { faForward } from "@fortawesome/free-solid-svg-icons/faForward";
import { faGavel } from "@fortawesome/free-solid-svg-icons/faGavel";
import { faGift } from "@fortawesome/free-solid-svg-icons/faGift";
import { faGlobeAmericas } from "@fortawesome/free-solid-svg-icons/faGlobeAmericas";
import { faGlobeEurope } from "@fortawesome/free-solid-svg-icons/faGlobeEurope";
import { faGripLines } from "@fortawesome/free-solid-svg-icons/faGripLines";
import { faGripLinesVertical } from "@fortawesome/free-solid-svg-icons/faGripLinesVertical";
import { faHandHoldingHeart } from "@fortawesome/free-solid-svg-icons/faHandHoldingHeart";
import { faHandshake } from "@fortawesome/free-solid-svg-icons/faHandshake";
import { faHashtag } from "@fortawesome/free-solid-svg-icons/faHashtag";
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons/faHeartBroken";
import { faHighlighter } from "@fortawesome/free-solid-svg-icons/faHighlighter";
import { faHistory } from "@fortawesome/free-solid-svg-icons/faHistory";
import { faIdBadge } from "@fortawesome/free-solid-svg-icons/faIdBadge";
import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
import { faItalic } from "@fortawesome/free-solid-svg-icons/faItalic";
import { faKey } from "@fortawesome/free-solid-svg-icons/faKey";
import { faLaptop } from "@fortawesome/free-solid-svg-icons/faLaptop";
import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
import { faLevelUpAlt } from "@fortawesome/free-solid-svg-icons/faLevelUpAlt";
import { faLifeRing } from "@fortawesome/free-solid-svg-icons/faLifeRing";
import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
import { faListOl } from "@fortawesome/free-solid-svg-icons/faListOl";
import { faListUl } from "@fortawesome/free-solid-svg-icons/faListUl";
import { faLock } from "@fortawesome/free-solid-svg-icons/faLock";
import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArrowAltRight";
import { faMagic } from "@fortawesome/free-solid-svg-icons/faMagic";
import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkerAlt";
import { faMapSigns } from "@fortawesome/free-solid-svg-icons/faMapSigns";
import { faMeteor } from "@fortawesome/free-solid-svg-icons/faMeteor";
import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
import { faMinusCircle } from "@fortawesome/free-solid-svg-icons/faMinusCircle";
import { faMoneyBill } from "@fortawesome/free-solid-svg-icons/faMoneyBill";
import { faMoneyBillWave } from "@fortawesome/free-solid-svg-icons/faMoneyBillWave";
import { faMoneyCheckAlt } from "@fortawesome/free-solid-svg-icons/faMoneyCheckAlt";
import { faMousePointer } from "@fortawesome/free-solid-svg-icons/faMousePointer";
import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
import { faPaperclip } from "@fortawesome/free-solid-svg-icons/faPaperclip";
import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
import { faPaste } from "@fortawesome/free-solid-svg-icons/faPaste";
import { faPause } from "@fortawesome/free-solid-svg-icons/faPause";
import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
import { faPencilRuler } from "@fortawesome/free-solid-svg-icons/faPencilRuler";
import { faPlay } from "@fortawesome/free-solid-svg-icons/faPlay";
import { faPlug } from "@fortawesome/free-solid-svg-icons/faPlug";
import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
import { faPlusCircle } from "@fortawesome/free-solid-svg-icons/faPlusCircle";
import { faPooStorm } from "@fortawesome/free-solid-svg-icons/faPooStorm";
import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
import { faRandom } from "@fortawesome/free-solid-svg-icons/faRandom";
import { faRedo } from "@fortawesome/free-solid-svg-icons/faRedo";
import { faReply } from "@fortawesome/free-solid-svg-icons/faReply";
import { faRobot } from "@fortawesome/free-solid-svg-icons/faRobot";
import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
import { faRuler } from "@fortawesome/free-solid-svg-icons/faRuler";
import { faSave } from "@fortawesome/free-solid-svg-icons/faSave";
import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
import { faSearchPlus } from "@fortawesome/free-solid-svg-icons/faSearchPlus";
import { faSeedling } from "@fortawesome/free-solid-svg-icons/faSeedling";
import { faServer } from "@fortawesome/free-solid-svg-icons/faServer";
import { faShare } from "@fortawesome/free-solid-svg-icons/faShare";
import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
import { faShieldAlt } from "@fortawesome/free-solid-svg-icons/faShieldAlt";
import { faSignal } from "@fortawesome/free-solid-svg-icons/faSignal";
import { faSignature } from "@fortawesome/free-solid-svg-icons/faSignature";
import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons/faSignOutAlt";
import { faSitemap } from "@fortawesome/free-solid-svg-icons/faSitemap";
import { faSkull } from "@fortawesome/free-solid-svg-icons/faSkull";
import { faSlidersH } from "@fortawesome/free-solid-svg-icons/faSlidersH";
import { faSort } from "@fortawesome/free-solid-svg-icons/faSort";
import { faSortDown } from "@fortawesome/free-solid-svg-icons/faSortDown";
import { faSortUp } from "@fortawesome/free-solid-svg-icons/faSortUp";
import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
import { faSquare } from "@fortawesome/free-solid-svg-icons/faSquare";
import { faStamp } from "@fortawesome/free-solid-svg-icons/faStamp";
import { faStar as faStarSolid } from "@fortawesome/free-solid-svg-icons/faStar";
import { faStopwatch } from "@fortawesome/free-solid-svg-icons/faStopwatch";
import { faSuitcaseRolling } from "@fortawesome/free-solid-svg-icons/faSuitcaseRolling";
import { faSync } from "@fortawesome/free-solid-svg-icons/faSync";
import { faTable } from "@fortawesome/free-solid-svg-icons/faTable";
import { faTag } from "@fortawesome/free-solid-svg-icons/faTag";
import { faTasks } from "@fortawesome/free-solid-svg-icons/faTasks";
import { faThLarge } from "@fortawesome/free-solid-svg-icons/faThLarge";
import { faThumbsDown as faThumbsDownSolid } from "@fortawesome/free-solid-svg-icons/faThumbsDown";
import { faThumbsUp as faThumbsUpSolid } from "@fortawesome/free-solid-svg-icons/faThumbsUp";
import { faTicketAlt } from "@fortawesome/free-solid-svg-icons/faTicketAlt";
import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
import { faTimesCircle as faTimesCircleSolid } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
import { faTools } from "@fortawesome/free-solid-svg-icons/faTools";
import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
import { faUndo } from "@fortawesome/free-solid-svg-icons/faUndo";
import { faUniversalAccess } from "@fortawesome/free-solid-svg-icons/faUniversalAccess";
import { faUnlink } from "@fortawesome/free-solid-svg-icons/faUnlink";
import { faUnlock } from "@fortawesome/free-solid-svg-icons/faUnlock";
import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
import { faUserAstronaut } from "@fortawesome/free-solid-svg-icons/faUserAstronaut";
import { faUserClock } from "@fortawesome/free-solid-svg-icons/faUserClock";
import { faUserFriends } from "@fortawesome/free-solid-svg-icons/faUserFriends";
import { faUserLock } from "@fortawesome/free-solid-svg-icons/faUserLock";
import { faUserPlus } from "@fortawesome/free-solid-svg-icons/faUserPlus";
import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons/faUserSecret";
import { faUserShield } from "@fortawesome/free-solid-svg-icons/faUserShield";
import { faVial } from "@fortawesome/free-solid-svg-icons/faVial";
import { faVideo } from "@fortawesome/free-solid-svg-icons/faVideo";
import { faWrench } from "@fortawesome/free-solid-svg-icons/faWrench";
import { faAward } from "@fortawesome/free-solid-svg-icons/faAward";

// Custom icon SVGs
import {
  ArrowToBottom,
  ArrowToLeft,
  ArrowToRight,
  Automation,
  BadgeCheck,
  BrandConfluenceIcon,
  BrandDrata,
  BrandFront,
  BrandGoogleDriveIcon,
  BrandJira,
  BrandMicrosoftTeams,
  BrandNotion,
  BrandSalesforce,
  BrandSlack,
  BrandZendesk,
  CommentAltCheck,
  ConveyorAI,
  ConveyorLogoIcon,
  DialogCheck,
  DoNotEnter,
  FactCheck,
  Folders,
  Globe,
  InsertEnd,
  InsertMiddle,
  InsertStart,
  LibraryAdd,
  QueryStats,
  Scroll,
  ShieldCheck,
  Sparkle,
  TriangleDown,
  TriangleUp,
} from "./svg";

import { StatusContext } from "../../contexts/status";
import { STATUS_VARIANT } from "../../types";
import { bemHOF } from "../../utilities";
import { SvgProps } from "../Svg";

const cn = bemHOF("Icon");

library.add(
  faArchive,
  faArrowDown,
  faArrowLeft,
  faArrowRight,
  faArrowsAlt,
  faArrowUp,
  faBackward,
  faBalanceScale,
  faBan,
  faBandAid,
  faBars,
  faBatteryHalf,
  faBed,
  faBell,
  faBellRegular,
  faBellSlash,
  faBellSlashRegular,
  faBiohazard,
  faBirthdayCake,
  faBold,
  faBolt,
  faBook,
  faBox,
  faBroom,
  faBug,
  faBullhorn,
  faBullseye,
  faCalculator,
  faCalendar,
  faCamera,
  faCaretDown,
  faCaretLeft,
  faCaretRight,
  faCaretUp,
  faChartBar,
  faChartLine,
  faCheck,
  faCheckCircle,
  faCheckCircleRegular,
  faCheckSquare,
  faChevronDown,
  faChevronLeft,
  faChevronRight,
  faChevronUp,
  faCircle,
  faCircleNotch,
  faCircleRegular,
  faClipboard,
  faClipboardCheck,
  faClock,
  faClockSolid,
  faClone,
  faCloudDownloadAlt,
  faCloudShowersHeavy,
  faCloudUploadAlt,
  faCodeBranch,
  faCog,
  faCoins,
  faColumns,
  faCommentAlt,
  faCompass,
  faCompress,
  faCompressArrowsAlt,
  faCopyRegular,
  faCopySolid,
  faCrosshairs,
  faCrown,
  faDoorClosed,
  faDoorOpen,
  faDownload,
  faDungeon,
  faEdit,
  faEllipsisH,
  faEllipsisV,
  faEnvelope,
  faEnvelopeRegular,
  faEnvelopeOpenText,
  faEraser,
  faExchangeAlt,
  faExclamation,
  faExclamationCircle,
  faExclamationTriangle,
  faExpand,
  faExpandArrowsAlt,
  faExternalLinkAlt,
  faExternalLinkSquareAlt,
  faEye,
  faEyeSlash,
  faFastBackward,
  faFastForward,
  faFeatherAlt,
  faFile,
  faFileAlt,
  faFileAltSolid,
  faFileExport,
  faFileImport,
  faFileSignature,
  faFillDrip,
  faFilter,
  faFlag,
  faFlask,
  faFolder,
  faFolderOpen,
  faForward,
  faGavel,
  faGift,
  faGlobeAmericas,
  faGlobeEurope,
  faGripLines,
  faGripLinesVertical,
  faHandHoldingHeart,
  faHandshake,
  faHashtag,
  faHeartBroken,
  faHighlighter,
  faHistory,
  faIdBadge,
  faImage,
  faInfoCircle,
  faItalic,
  faKey,
  faKeyboard,
  faLaptop,
  faLayerGroup,
  faLevelUpAlt,
  faLifeRing,
  faLink,
  faListOl,
  faListUl,
  faLock,
  faLongArrowAltRight,
  faMagic,
  faMapMarkerAlt,
  faMapSigns,
  faMeteor,
  faMinus,
  faMinusCircle,
  faMoneyBill,
  faMoneyBillWave,
  faMoneyCheckAlt,
  faMousePointer,
  faPalette,
  faPaperclip,
  faPaperPlane,
  faPaste,
  faPause,
  faPen,
  faPencilRuler,
  faPlay,
  faPlug,
  faPlus,
  faPlusCircle,
  faPooStorm,
  faQuestion,
  faQuestionCircle,
  faQuestionCircleRegular,
  faRandom,
  faRedo,
  faReply,
  faRobot,
  faRocket,
  faRuler,
  faSave,
  faScroll,
  faSearch,
  faSearchPlus,
  faSeedling,
  faServer,
  faShare,
  faShareAlt,
  faShieldAlt,
  faSignal,
  faSignature,
  faSignOutAlt,
  faSitemap,
  faSkull,
  faSlidersH,
  faSort,
  faSortDown,
  faSortUp,
  faSpinner,
  faSquare,
  faStamp,
  faStar,
  faStarSolid,
  faStopwatch,
  faSuitcaseRolling,
  faSync,
  faTable,
  faTag,
  faTasks,
  faThLarge,
  faThumbsDownRegular,
  faThumbsDownSolid,
  faThumbsUpRegular,
  faThumbsUpSolid,
  faTicketAlt,
  faTimes,
  faTimesCircleRegular,
  faTimesCircleSolid,
  faTools,
  faTrash,
  faUndo,
  faUniversalAccess,
  faUnlink,
  faUnlock,
  faUser,
  faUserAstronaut,
  faUserClock,
  faUserFriends,
  faUserLock,
  faUserPlus,
  faUserRegular,
  faUsers,
  faUserSecret,
  faUserShield,
  faVial,
  faVideo,
  faWrench,
  faAward,
);

export enum CUSTOM_ICON_TYPE {
  ARROW_TO_BOTTOM = "arrow-to-bottom",
  ARROW_TO_LEFT = "arrow-to-left",
  ARROW_TO_RIGHT = "arrow-to-right",
  AUTOMATION = "automation",
  BADGE_CHECK = "badge-check",
  BRAND_CONFLUENCE = "brand-confluence",
  BRAND_DRATA = "brand-drata",
  BRAND_FRONT = "brand-front",
  BRAND_GOOGLE_DRIVE = "brand-google-drive",
  BRAND_JIRA = "brand-jira",
  BRAND_MICROSOFT_TEAMS = "brand-microsoft-teams",
  BRAND_NOTION = "brand-notion",
  BRAND_SALESFORCE = "brand-salesforce",
  BRAND_SLACK = "brand-slack",
  BRAND_ZENDESK = "brand-zendesk",
  COMMENT_ALT_CHECK = "comment-alt-check",
  CONVEYOR_AI = "conveyor-ai",
  CONVEYOR_LOGO = "conveyor-logo",
  DIALOG_CHECK = "dialog-check",
  DO_NOT_ENTER = "do-not-enter",
  FACT_CHECK = "fact-check",
  FOLDERS = "folders",
  GLOBE = "globe",
  INSERT_END = "insert-end",
  INSERT_MIDDLE = "insert-middle",
  INSERT_START = "insert-start",
  LIBRARY_ADD = "library-add",
  QUERY_STATS = "query-stats",
  SCROLL = "scroll",
  SHIELD_CHECK = "shield-check",
  SPARKLE = "sparkle",
  TRIANGLE_DOWN = "triangle-down",
  TRIANGLE_UP = "triangle-up",
}

type CustomIconPaths = Record<
  CUSTOM_ICON_TYPE,
  (props: SvgProps) => JSX.Element
>;
const CustomIcons: CustomIconPaths = {
  [CUSTOM_ICON_TYPE.ARROW_TO_BOTTOM]: ArrowToBottom,
  [CUSTOM_ICON_TYPE.ARROW_TO_LEFT]: ArrowToLeft,
  [CUSTOM_ICON_TYPE.ARROW_TO_RIGHT]: ArrowToRight,
  [CUSTOM_ICON_TYPE.AUTOMATION]: Automation,
  [CUSTOM_ICON_TYPE.BADGE_CHECK]: BadgeCheck,
  [CUSTOM_ICON_TYPE.BRAND_CONFLUENCE]: BrandConfluenceIcon,
  [CUSTOM_ICON_TYPE.BRAND_DRATA]: BrandDrata,
  [CUSTOM_ICON_TYPE.BRAND_FRONT]: BrandFront,
  [CUSTOM_ICON_TYPE.BRAND_GOOGLE_DRIVE]: BrandGoogleDriveIcon,
  [CUSTOM_ICON_TYPE.BRAND_JIRA]: BrandJira,
  [CUSTOM_ICON_TYPE.BRAND_MICROSOFT_TEAMS]: BrandMicrosoftTeams,
  [CUSTOM_ICON_TYPE.BRAND_NOTION]: BrandNotion,
  [CUSTOM_ICON_TYPE.BRAND_SALESFORCE]: BrandSalesforce,
  [CUSTOM_ICON_TYPE.BRAND_SLACK]: BrandSlack,
  [CUSTOM_ICON_TYPE.BRAND_ZENDESK]: BrandZendesk,
  [CUSTOM_ICON_TYPE.COMMENT_ALT_CHECK]: CommentAltCheck,
  [CUSTOM_ICON_TYPE.CONVEYOR_AI]: ConveyorAI,
  [CUSTOM_ICON_TYPE.CONVEYOR_LOGO]: ConveyorLogoIcon,
  [CUSTOM_ICON_TYPE.DIALOG_CHECK]: DialogCheck,
  [CUSTOM_ICON_TYPE.DO_NOT_ENTER]: DoNotEnter,
  [CUSTOM_ICON_TYPE.FACT_CHECK]: FactCheck,
  [CUSTOM_ICON_TYPE.FOLDERS]: Folders,
  [CUSTOM_ICON_TYPE.GLOBE]: Globe,
  [CUSTOM_ICON_TYPE.INSERT_END]: InsertEnd,
  [CUSTOM_ICON_TYPE.INSERT_MIDDLE]: InsertMiddle,
  [CUSTOM_ICON_TYPE.INSERT_START]: InsertStart,
  [CUSTOM_ICON_TYPE.LIBRARY_ADD]: LibraryAdd,
  [CUSTOM_ICON_TYPE.QUERY_STATS]: QueryStats,
  [CUSTOM_ICON_TYPE.SCROLL]: Scroll,
  [CUSTOM_ICON_TYPE.SHIELD_CHECK]: ShieldCheck,
  [CUSTOM_ICON_TYPE.SPARKLE]: Sparkle,
  [CUSTOM_ICON_TYPE.TRIANGLE_DOWN]: TriangleDown,
  [CUSTOM_ICON_TYPE.TRIANGLE_UP]: TriangleUp,
};

export enum ICON_TYPE {
  ARCHIVE = "archive",
  ARROW_DOWN = "arrow-down",
  ARROW_LEFT = "arrow-left",
  ARROW_RIGHT = "arrow-right",
  ARROW_UP = "arrow-up",
  ARROWS_ALT = "arrows-alt",
  BACKWARD = "backward",
  BALANCE_SCALE = "balance-scale",
  BAN = "ban",
  BANDAID = "band-aid",
  BARS = "bars",
  BATTERY_HALF = "battery-half",
  BED = "bed",
  BELL = "bell",
  BELLSLASH = "bell-slash",
  BIOHAZARD = "biohazard",
  BIRTHDAY_CAKE = "birthday-cake",
  BOLD = "bold",
  BOLT = "bolt",
  BOOK = "book",
  BOX = "box",
  BROOM = "broom",
  BUG = "bug",
  BULLHORN = "bullhorn",
  BULLSEYE = "bullseye",
  CALENDAR = "calendar",
  CALCULATOR = "calculator",
  CAMERA = "camera",
  CARET_DOWN = "caret-down",
  CARET_LEFT = "caret-left",
  CARET_RIGHT = "caret-right",
  CARET_UP = "caret-up",
  CHART_BAR = "chart-bar",
  CHART_LINE = "chart-line",
  CHECK = "check",
  CHECK_CIRCLE = "check-circle",
  CHECK_SQUARE = "check-square",
  CHEVRON_DOWN = "chevron-down",
  CHEVRON_LEFT = "chevron-left",
  CHEVRON_RIGHT = "chevron-right",
  CHEVRON_UP = "chevron-up",
  CIRCLE = "circle",
  CIRCLE_NOTCH = "circle-notch",
  CLOCK = "clock",
  CLONE = "clone",
  CLIPBOARD = "clipboard",
  CLIPBOARD_CHECK = "clipboard-check",
  CLOUD_DOWNLOAD_ALT = "cloud-download-alt",
  CLOUD_UPLOAD_ALT = "cloud-upload-alt",
  CODE_BRANCH = "code-branch",
  COG = "cog",
  COINS = "coins",
  COLUMNS = "columns",
  COMMENT_ALT = "comment-alt",
  COMPASS = "compass",
  COMPRESS = "compress",
  COMPRESS_ARROWS_ALT = "compress-arrows-alt",
  CROSSHAIRS = "crosshairs",
  CROWN = "crown",
  COPY = "copy",
  DOOR_CLOSED = "door-closed",
  DOOR_OPEN = "door-open",
  DOWNLOAD = "download",
  DUNGEON = "dungeon",
  EDIT = "edit",
  ELLIPSIS_H = "ellipsis-h",
  ELLIPSIS_V = "ellipsis-v",
  ENVELOPE = "envelope",
  ENVELOPE_OPEN_TEXT = "envelope-open-text",
  ERASER = "eraser",
  EXCHANGE_ALT = "exchange-alt",
  EXCLAMATION = "exclamation",
  EXCLAMATION_CIRCLE = "exclamation-circle",
  EXCLAMATION_TRIANGLE = "exclamation-triangle",
  EXPAND = "expand",
  EXPAND_ARROWS_ALT = "expand-arrows-alt",
  EXTERNAL_LINK_ALT = "external-link-alt",
  EXTERNAL_LINK_SQUARE_ALT = "external-link-square-alt",
  EYE = "eye",
  EYE_SLASH = "eye-slash",
  FAST_BACKWARD = "fast-backward",
  FAST_FORWARD = "fast-forward",
  FEATHER_ALT = "feather-alt",
  FILE = "file",
  FILE_ALT = "file-alt",
  FILE_EXPORT = "file-export",
  FILE_IMPORT = "file-import",
  FILE_SIGNATURE = "file-signature",
  FILL_DRIP = "fill-drip",
  FILTER = "filter",
  FLAG = "flag",
  FLASK = "flask",
  FOLDER = "folder",
  FOLDER_OPEN = "folder-open",
  FORWARD = "forward",
  GAVEL = "gavel",
  GIFT = "gift",
  GLOBE_AMERICAS = "globe-americas",
  GLOBE_EUROPE = "globe-europe",
  GRIP_LINES = "grip-lines",
  GRIP_LINES_VERTICAL = "grip-lines-vertical",
  HAND_HOLDING_HEART = "hand-holding-heart",
  HANDSHAKE = "handshake",
  HASHTAG = "hashtag",
  HEART_BROKEN = "heart-broken",
  HIGHLIGHTER = "highlighter",
  HISTORY = "history",
  ID_BADGE = "id-badge",
  IMAGE = "image",
  INFO_CIRCLE = "info-circle",
  ITALIC = "italic",
  KEY = "key",
  KEYBOARD = "keyboard",
  LAPTOP = "laptop",
  LAYER_GROUP = "layer-group",
  LEVEL_UP_ALT = "level-up-alt",
  LIFE_RING = "life-ring",
  LINK = "link",
  LIST_OL = "list-ol",
  LIST_UL = "list-ul",
  LOCK = "lock",
  LONG_ARROW_ALT_RIGHT = "long-arrow-alt-right",
  MAGIC = "magic",
  MAP_MARKER_ALT = "map-marker-alt",
  MAP_SIGNS = "map-signs",
  METEOR = "meteor",
  MINUS = "minus",
  MINUS_CIRCLE = "minus-circle",
  MOUSE_POINTER = "mouse-pointer",
  PALETTE = "palette",
  PAPER_PLANE = "paper-plane",
  PAPERCLIP = "paperclip",
  PASTE = "paste",
  PAUSE = "pause",
  PEN = "pen",
  PENCIL_RULER = "pencil-ruler",
  PLAY = "play",
  PLUS = "plus",
  PLUS_CIRCLE = "plus-circle",
  POO_STORM = "poo-storm", // Use in storybook examples
  QUESTION = "question",
  QUESTION_CIRCLE = "question-circle",
  RANDOM = "random",
  REDO = "redo",
  REPLY = "reply",
  ROBOT = "robot",
  ROCKET = "rocket",
  RULER = "ruler",
  SAVE = "save",
  SCROLL = "scroll",
  SEARCH = "search",
  SEARCH_PLUS = "search-plus",
  SEEDLING = "seedling",
  SERVER = "server",
  SHARE = "share",
  SHARE_ALT = "share-alt",
  SHIELD_ALT = "shield-alt",
  SHIELD_CHECK = "shield-check",
  SIGN_OUT_ALT = "sign-out-alt",
  SIGNAL = "signal",
  SIGNATURE = "signature",
  SITEMAP = "sitemap",
  SKULL = "skull",
  SLIDERS_H = "sliders-h",
  SORT = "sort",
  SORT_DOWN = "sort-down",
  SORT_UP = "sort-up",
  SPINNER = "spinner",
  SQUARE = "square",
  STAMP = "stamp",
  STAR = "star",
  STOPWATCH = "stopwatch",
  SUITCASE_ROLLING = "suitcase-rolling",
  SYNC = "sync",
  TABLE = "table",
  TAG = "tag",
  TASKS = "tasks",
  TICKET_ALT = "ticket-alt",
  TIMES = "times",
  TIMES_CIRCLE = "times-circle",
  TH_LARGE = "th-large",
  THUMBS_DOWN = "thumbs-down",
  THUMBS_UP = "thumbs-up",
  TOOLS = "tools",
  TRASH = "trash",
  UNDO = "undo",
  UNIVERSAL_ACCESS = "universal-access",
  UNLINK = "unlink",
  UNLOCK = "unlock",
  USER = "user",
  USER_ASTRONAUT = "user-astronaut",
  USER_CLOCK = "user-clock",
  USER_LOCK = "user-lock",
  USER_PLUS = "user-plus",
  USERS = "users",
  USER_FRIENDS = "user-friends",
  USER_SECRET = "user-secret",
  USER_SHIELD = "user-shield",
  VIAL = "vial",
  VIDEO = "video",
  WRENCH = "wrench",
  PLUG = "plug",
  MONEY_BILL = "money-bill",
  MONEY_BILL_WAVE = "money-bill-wave",
  MONEY_CHECK_ALT = "money-check-alt",
  CLOUD_SHOWERS_HEAVY = "cloud-showers-heavy",
  AWARD = "award",
}

export enum ICON_STYLE_PREFIX {
  SOLID = "fas",
  REGULAR = "far",
}

interface BaseIconProps extends HTMLAttributes<HTMLSpanElement> {
  color?: string;
  [key: string]: any; // Until comply is on typescript v4, this is needed to allow for data-testid attribute
}

export interface SharedFaIconProps extends BaseIconProps {
  spin?: boolean;
  prefix?: ICON_STYLE_PREFIX;
  flip?: FlipProp;
}

export interface FaIconProps extends SharedFaIconProps {
  icon: ICON_TYPE;
}

export interface CustomIconProps extends BaseIconProps {
  icon: CUSTOM_ICON_TYPE;
}

export type IconProps = FaIconProps | CustomIconProps;

export interface StatusIconProps extends SharedFaIconProps {
  status?: STATUS_VARIANT;
}

const getIconClasses = ({
  className,
  color,
}: Pick<BaseIconProps, "className" | "color">) => {
  const hasColorClassName = className
    ? className.split(" ").filter((c) => c.startsWith("text-")).length > 0
    : false;

  return classNames(
    "inline-flex",
    className,
    !hasColorClassName && color ? `text-${color}` : "",
  );
};

export const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
  const isCustomIcon = Object.values(CUSTOM_ICON_TYPE).some(
    (i) => i === props.icon,
  );

  if (isCustomIcon) {
    const { style, className, color, icon, ...rest } = props as CustomIconProps;
    const CustomIcon = CustomIcons[icon];

    return (
      <span
        ref={ref}
        className={getIconClasses({
          className: classNames(cn({ m: "custom" }), className),
          color,
        })}
        style={style}
        {...rest}
      >
        <CustomIcon
          role="img"
          focusable="false"
          aria-hidden="true"
          className="svg-inline--fa fa-fw"
        />
      </span>
    );
  }

  const {
    icon,
    style,
    className,
    spin = false,
    color,
    prefix: prefixProp,
    flip,
    ...rest
  } = props as FaIconProps;

  /** If no value is provided to the prefix prop, icons will revert to
   *  default "fas" (solid) prefix unless otherwise set in this object.
   *
   *  regular === "far"
   * */
  const iconSetDefaults: { [key in ICON_TYPE]?: ICON_STYLE_PREFIX } = {
    [ICON_TYPE.FILE_ALT]: ICON_STYLE_PREFIX.REGULAR,
    [ICON_TYPE.CLOCK]: ICON_STYLE_PREFIX.REGULAR,
    [ICON_TYPE.COPY]: ICON_STYLE_PREFIX.REGULAR,
    [ICON_TYPE.KEYBOARD]: ICON_STYLE_PREFIX.REGULAR,
    [ICON_TYPE.STAR]: ICON_STYLE_PREFIX.REGULAR,
    [ICON_TYPE.THUMBS_DOWN]: ICON_STYLE_PREFIX.REGULAR,
    [ICON_TYPE.THUMBS_UP]: ICON_STYLE_PREFIX.REGULAR,
  };

  const prefix: ICON_STYLE_PREFIX =
    prefixProp || iconSetDefaults[icon] || ICON_STYLE_PREFIX.SOLID;

  const faIcon: [ICON_STYLE_PREFIX, ICON_TYPE] = [prefix, icon];

  return (
    <span
      ref={ref}
      className={getIconClasses({ className, color })}
      style={style}
      {...rest}
    >
      <FontAwesomeIcon
        className="fa-fw"
        icon={faIcon}
        spin={spin}
        flip={flip}
      />
    </span>
  );
});

export const StatusIcon = forwardRef<HTMLSpanElement, StatusIconProps>(
  ({ status: statusProp, ...rest }, ref) => {
    const context = useContext(StatusContext);

    let computedStatus = STATUS_VARIANT.DEFAULT;
    if (statusProp) {
      computedStatus = statusProp;
    } else if (context) {
      computedStatus = context;
    }

    let icon = ICON_TYPE.INFO_CIRCLE;
    switch (computedStatus) {
      case STATUS_VARIANT.SUCCESS:
        icon = ICON_TYPE.CHECK;
        break;
      case STATUS_VARIANT.WARNING:
        icon = ICON_TYPE.EXCLAMATION_TRIANGLE;
        break;
      case STATUS_VARIANT.DANGER:
        icon = ICON_TYPE.BAN;
        break;
      default:
        break;
    }

    return <Icon ref={ref} icon={icon} {...rest} />;
  },
);

export type IconType = ICON_TYPE | CUSTOM_ICON_TYPE;