import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import { HasProduct, withProduct } from "@insite/client-framework/Components/ProductContext";
import { BadgeTypeValues } from "@insite/client-framework/Types/ApiModels";
import WidgetModule from "@insite/client-framework/Types/WidgetModule";
import WidgetProps from "@insite/client-framework/Types/WidgetProps";
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 LazyImage, { LazyImagePresentationProps, LazyImageProps } from "@insite/mobius/LazyImage";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import * as React from "react";
import { css } from "styled-components";

const enum fields {
    tags = "tags",
    numberOfBadgesToDisplay = "numberOfBadgesToDisplay",
    maximumNumberOfBadgesPerRow = "maximumNumberOfBadgesPerRow",
}

type Props = WidgetProps & HasProduct;

export interface ProductDetailsImageBadgeStyles {
    container?: InjectableCss;
    imageContainer?: FlexWrapContainerProps;
    imageItem?: FlexItemProps;
    image?: LazyImageProps;
}

export const imageBadgeStyles: ProductDetailsImageBadgeStyles = {
    imageItem: {
        css: css`
            padding: 5px;
            justify-content: center;
        `,
    },
};

const styles = imageBadgeStyles;

const ProductDetailsImageBadgeWidget = ({
    product: { badges },
    fields: { tags, numberOfBadgesToDisplay, maximumNumberOfBadgesPerRow },
}: Props) => {
    let imageBadges = badges?.filter(
        badge => badge.displayOnBadgeWidget && badge.badgeType === BadgeTypeValues.Image && badge.largeImageBadgePath,
    );

    if (tags && tags.length > 0) {
        imageBadges = imageBadges?.filter(
            badge => tags.findIndex((tag: string) => tag.toLowerCase() === badge.tagName.toLowerCase()) > -1,
        );
    }

    const smallImgProps = {
        style: {
            width: "50%",
            height: "auto",
        },
    };

    // default badge size
    const mediumImgProps = {
        style: {
            width: "75%",
            height: "auto",
        },
    };

    const largeImgProps = {
        style: {
            width: "100%",
            height: "auto",
        },
    };

    return (
        <StyledWrapper {...styles.container} data-test-selector="imageBadges">
            <FlexWrapContainer {...styles.imageContainer}>
                {imageBadges?.slice(0, numberOfBadgesToDisplay).map(badge => (
                    <FlexItem key={badge.id} flexColumns={maximumNumberOfBadgesPerRow} {...styles.imageItem}>
                        <Badge
                            type={badge.badgeType}
                            value={badge.largeImageBadgePath}
                            imageAltText={badge.imageAltText ? badge.imageAltText : badge.name}
                            imageBadgeProps={
                                badge.detailWidgetBadgeSize === "Large"
                                    ? largeImgProps
                                    : badge.detailWidgetBadgeSize === "Small"
                                    ? smallImgProps
                                    : mediumImgProps
                            }
                        />
                    </FlexItem>
                ))}
            </FlexWrapContainer>
        </StyledWrapper>
    );
};

const widgetModule: WidgetModule = {
    component: withProduct(ProductDetailsImageBadgeWidget),
    definition: {
        displayName: "Image Badge",
        group: "Product Details",
        allowedContexts: ["ProductDetailsPage"],
        fieldDefinitions: [
            {
                name: fields.tags,
                displayName: "Tags",
                editorTemplate: "TagsField",
                defaultValue: [],
                fieldType: "General",
                instructions: 'Type and press "Enter" to save',
            },
            {
                name: fields.numberOfBadgesToDisplay,
                displayName: "Number of badges to display",
                editorTemplate: "DropDownField",
                isRequired: true,
                defaultValue: "8",
                options: [
                    { displayName: "1", value: "1" },
                    { displayName: "2", value: "2" },
                    { displayName: "3", value: "3" },
                    { displayName: "4", value: "4" },
                    { displayName: "5", value: "5" },
                    { displayName: "6", value: "6" },
                    { displayName: "7", value: "7" },
                    { displayName: "8", value: "8" },
                    { displayName: "9", value: "9" },
                    { displayName: "10", value: "10" },
                    { displayName: "11", value: "11" },
                    { displayName: "12", value: "12" },
                    { displayName: "13", value: "13" },
                    { displayName: "14", value: "14" },
                    { displayName: "15", value: "15" },
                    { displayName: "16", value: "16" },
                    { displayName: "17", value: "17" },
                    { displayName: "18", value: "18" },
                    { displayName: "19", value: "19" },
                    { displayName: "20", value: "20" },
                ],
                fieldType: "General",
            },
            {
                name: fields.maximumNumberOfBadgesPerRow,
                displayName: "Badges Per Row",
                editorTemplate: "DropDownField",
                isRequired: true,
                defaultValue: "4",
                options: [
                    { displayName: "1", value: "1" },
                    { displayName: "2", value: "2" },
                    { displayName: "3", value: "3" },
                    { displayName: "4", value: "4" },
                    { displayName: "5", value: "5" },
                    { displayName: "6", value: "6" },
                    { displayName: "7", value: "7" },
                    { displayName: "8", value: "8" },
                ],
                fieldType: "General",
            },
        ],
    },
};

export default widgetModule;
