import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import wrapInContainerStyles from "@insite/client-framework/Common/wrapInContainerStyles";
import { BadgeModel } from "@insite/client-framework/Types/ApiModels";
import Badge from "@insite/mobius/Badge";
import { TypographyPresentationProps } from "@insite/mobius/Typography";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import * as React from "react";
import { useState } from "react";
import { css } from "styled-components";

interface Props {
    badgeList: BadgeModel[];
    maxBadges: number;
    extendedStyles?: ProductTextBadgesStyles;
}

export interface ProductTextBadgesStyles {
    container?: InjectableCss;
    badge?: InjectableCss;
    badgeText?: TypographyPresentationProps;
}

export const productTextBadgesStyles: ProductTextBadgesStyles = {
    badge: {
        css: css`
            margin-top: 5px;
        `,
    },
    badgeText: {
        weight: "bold",
        size: 15,
        css: css`
            width: 100%;
            margin: auto;
            ${wrapInContainerStyles}
        `,
    },
};

const ProductTextBadges = ({ badgeList, maxBadges, extendedStyles }: Props) => {
    const [styles] = useState(() => mergeToNew(productTextBadgesStyles, extendedStyles));

    return (
        <StyledWrapper {...styles.container} data-test-selector="textBadges">
            {badgeList.slice(0, maxBadges).map(badge => (
                <StyledWrapper key={badge.id} {...styles.badge}>
                    <Badge
                        type={badge.badgeType}
                        value={badge.displayText}
                        badgeTextColor={badge.textColorHexCode}
                        badgeBackgroundColor={badge.badgeColorHexCode}
                        badgeTextRounding={badge.badgeStyle === "Round" ? 20 : 0}
                        textBadgeCss={styles.badgeText}
                        {...styles.badge}
                    />
                </StyledWrapper>
            ))}
        </StyledWrapper>
    );
};

export default ProductTextBadges;
