import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import { BadgeModel } from "@insite/client-framework/Types/ApiModels";
import FlexItem, { FlexItemProps } from "@insite/content-library/Widgets/Brand/FlexItem";
import FlexWrapContainer, { FlexWrapContainerProps } from "@insite/content-library/Widgets/Brand/FlexWrapContainer";
import Badge from "@insite/mobius/Badge";
import { LazyImageProps } from "@insite/mobius/LazyImage";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import React, { useState } from "react";
import { css } from "styled-components";

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

export interface ProductImageBadgesStyles {
    container?: InjectableCss;
    imageContainer?: FlexWrapContainerProps;
    imageItem?: FlexItemProps;
    badgeImageProps?: JSX.IntrinsicElements["img"];
    image?: LazyImageProps;
}

export const productImageBadgesStyles: ProductImageBadgesStyles = {
    imageContainer: {
        css: css`
            justify-content: left;
        `,
    },
    badgeImageProps: {
        style: {
            width: "100%",
            height: "auto",
        },
    },
    imageItem: {
        css: css`
            padding: 5px;
            justify-content: center;
        `,
    },
};

const ProductImageBadges = ({ badgeList, maxBadges, extendedStyles, numberOfColumns }: Props) => {
    const [styles] = useState(() => mergeToNew(productImageBadgesStyles, extendedStyles));

    return (
        <StyledWrapper {...styles.container} data-test-selector="productImageBadges">
            <FlexWrapContainer {...styles.imageContainer}>
                {badgeList.slice(0, maxBadges).map(badge => (
                    <FlexItem key={badge.id} flexColumns={numberOfColumns ?? 4} {...styles.imageItem}>
                        <Badge
                            type={badge.badgeType}
                            value={badge.largeImageBadgePath}
                            imageAltText={badge.imageAltText ? badge.imageAltText : badge.name}
                            imageBadgeProps={styles.badgeImageProps}
                        />
                    </FlexItem>
                ))}
            </FlexWrapContainer>
        </StyledWrapper>
    );
};

export default ProductImageBadges;
