import * as icons from "@ledgerhq/crypto-icons-ui/react";
import React from "react";
import { ensureContrast } from "../../../styles";
import styled, { useTheme } from "styled-components";
import Text from "../Text/index";
import Flex from "../../layout/Flex";
export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
    const key = rawKey;
    if (!set.has(key))
        set.add(key);
    return set;
}, new Set()));
const Container = styled(Flex).attrs((p) => ({
    heigth: p.size,
    width: p.size,
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
})) ``;
const Circle = styled(Flex).attrs((p) => ({
    heigth: p.size,
    width: p.size,
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    borderRadius: "50%",
    backgroundColor: p.backgroundColor,
})) ``;
const TokenContainer = styled(Flex).attrs((p) => ({
    position: "absolute",
    bottom: "-2px",
    right: "-5px",
    alignItems: "center",
    justifyContent: "center",
    heigth: p.size,
    width: p.size,
    borderRadius: "50%",
    border: `2px solid ${p.borderColor}`,
    backgroundColor: p.backgroundColor,
    zIndex: 0,
})) ``;
function Fallback({ name }) {
    return (React.createElement(Text, { uppercase: true, color: "neutral.c70" }, name.slice(0, 1)));
}
const IconBox = ({ children, color, backgroundColor, disabled, size = 16, tokenIcon = "", }) => {
    const { colors } = useTheme();
    if (tokenIcon in icons) {
        // @ts-expect-error FIXME I don't know how to make you happy ts
        const Component = icons[tokenIcon];
        const defaultColor = Component.DefaultColor;
        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
        return (React.createElement(Container, { size: size },
            children,
            tokenIcon && (React.createElement(TokenContainer, { size: size / 3, borderColor: colors.background.main, backgroundColor: contrastedColor },
                React.createElement(Component, { size: size, color: colors.background.main })))));
    }
    return children;
};
const CryptoIcon = ({ name, size = 16, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }) => {
    const { colors } = useTheme();
    const maybeIconName = `${name}`;
    if (maybeIconName in icons) {
        // @ts-expect-error FIXME I don't know how to make you happy ts
        const Component = icons[maybeIconName];
        const defaultColor = Component.DefaultColor;
        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
        return (React.createElement(IconBox, { size: size, tokenIcon: tokenIcon, color: color, disabled: disabled, name: name }, tokenIcon || circleIcon ? (React.createElement(Circle, { backgroundColor: contrastedColor, size: size },
            React.createElement(Component, { size: size, color: colors.background.main }))) : (React.createElement(Component, { size: size, color: contrastedColor }))));
    }
    if (fallbackIcon) {
        return fallbackIcon;
    }
    return React.createElement(Fallback, { name: name });
};
export default CryptoIcon;
//# sourceMappingURL=CryptoIcon.js.map