import StyledWrapper from "@insite/client-framework/Common/StyledWrapper";
import wrapInContainerStyles from "@insite/client-framework/Common/wrapInContainerStyles";
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 Badge from "@insite/mobius/Badge";
import { TypographyPresentationProps } from "@insite/mobius/Typography";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import * as React from "react";
import { css } from "styled-components";

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

type Props = WidgetProps & HasProduct;

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

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

const styles = textBadgeStyles;

const ProductDetailsTextBadgeWidget = ({ product: { badges }, fields: { tags, numberOfBadgesToDisplay } }: Props) => {
    let textBadges = badges?.filter(
        badge => badge.displayOnBadgeWidget && badge.badgeType === BadgeTypeValues.Text && badge.displayText,
    );

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

    return (
        <StyledWrapper {...styles.container} data-test-selector="textBadges">
            {textBadges?.slice(0, numberOfBadgesToDisplay).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>
    );
};

const widgetModule: WidgetModule = {
    component: withProduct(ProductDetailsTextBadgeWidget),
    definition: {
        displayName: "Text 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",
            },
        ],
    },
};

export default widgetModule;
