import useWidgetBadges from "@insite/client-framework/Common/Hooks/useWidgetBadges";
import { HasProductContext, withProductContext } from "@insite/client-framework/Components/ProductContext";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { getSettingsCollection } from "@insite/client-framework/Store/Context/ContextSelectors";
import { VariantDisplayTypeValues } from "@insite/client-framework/Types/ApiModels";
import ProductAttributes, { ProductAttributesStyles } from "@insite/content-library/Components/ProductAttributes";
import { ProductAvailabilityStyles } from "@insite/content-library/Components/ProductAvailability";
import ProductBrand, { ProductBrandStyles } from "@insite/content-library/Components/ProductBrand";
import ProductContextAvailability from "@insite/content-library/Components/ProductContextAvailability";
import ProductDescription, { ProductDescriptionStyles } from "@insite/content-library/Components/ProductDescription";
import ProductImageBadges from "@insite/content-library/Components/ProductImageBadges";
import ProductPartNumbers, { ProductPartNumbersStyles } from "@insite/content-library/Components/ProductPartNumbers";
import ProductTextBadges from "@insite/content-library/Components/ProductTextBadges";
import ProductListVariantSwatch from "@insite/content-library/Widgets/ProductList/ProductListVariantSwatch";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import React from "react";
import { connect } from "react-redux";
import { css } from "styled-components";

interface OwnProps {
    showBrand: boolean;
    showTitle: boolean;
    showPartNumbers: boolean;
    showAvailability: boolean;
    showAttributes: boolean;
    showImageBadges?: boolean;
    maxImageBadges?: number;
    showTextBadges?: boolean;
    maxTextBadges?: number;
}

const mapStateToProps = (state: ApplicationState) => ({
    settingsCollection: getSettingsCollection(state),
});

type Props = ReturnType<typeof mapStateToProps> & OwnProps & HasProductContext;

export interface ProductListProductInformationStyles {
    container?: GridContainerProps;
    brandStyles?: ProductBrandStyles;
    descriptionStyles?: ProductDescriptionStyles;
    brandGridItem?: GridItemProps;
    descriptionGridItem?: GridItemProps;
    partNumbersGridItem?: GridItemProps;
    swatchGridItem?: GridItemProps;
    imageBadgeGridItem?: GridItemProps;
    textBadgeGridItem?: GridItemProps;
    partNumbersStyles?: ProductPartNumbersStyles;
    availabilityGridItem?: GridItemProps;
    availabilityStyles?: ProductAvailabilityStyles;
    attributesGridItem?: GridItemProps;
    attributes?: ProductAttributesStyles;
    searchScoreDataGridItem?: GridItemProps;
}

export const productInformationStyles: ProductListProductInformationStyles = {
    container: {
        gap: 10,
        css: css`
            width: 100%;
        `,
    },
    descriptionStyles: {
        productDetailLink: {
            css: css`
                width: 100%;
            `,
            typographyProps: {
                size: 20,
            },
        },
    },
    brandGridItem: {
        width: 12,
    },
    descriptionGridItem: {
        width: 12,
    },
    partNumbersGridItem: {
        width: 12,
    },
    swatchGridItem: {
        width: 12,
    },
    imageBadgeGridItem: {
        width: 12,
    },
    textBadgeGridItem: {
        width: 12,
    },
    availabilityGridItem: {
        width: 12,
    },
    attributesGridItem: {
        width: 12,
    },
    searchScoreDataGridItem: {
        width: 12,
    },
};

const styles = productInformationStyles;

const ProductListProductInformation = ({
    productContext,
    settingsCollection,
    showBrand,
    showTitle,
    showPartNumbers,
    showAvailability,
    showAttributes,
    showImageBadges,
    maxImageBadges,
    showTextBadges,
    maxTextBadges,
}: Props) => {
    const { product } = productContext;
    if (!product) {
        return null;
    }

    const { imageBadges, textBadges } = useWidgetBadges({ productContext, showTextBadges, showImageBadges });

    let variantDisplayTrait = null;
    if (product.variantTraits && product.variantTraits.length > 0) {
        const swatchedViewList = [
            VariantDisplayTypeValues.SwatchDropdown,
            VariantDisplayTypeValues.SwatchList,
            VariantDisplayTypeValues.SwatchGrid,
        ];
        const sortedVaraintTraits = product.variantTraits.slice().sort((a, b) => a.sortOrder - b.sortOrder);
        variantDisplayTrait = sortedVaraintTraits.find(x => swatchedViewList.includes(x.displayType));
    }

    return (
        <GridContainer {...styles.container}>
            {product.brand && showBrand && (
                <GridItem {...styles.brandGridItem}>
                    <ProductBrand brand={product.brand} extendedStyles={styles.brandStyles} />
                </GridItem>
            )}
            {showTitle && (
                <GridItem {...styles.descriptionGridItem}>
                    <ProductDescription product={productContext} extendedStyles={styles.descriptionStyles} />
                </GridItem>
            )}
            {showPartNumbers && (
                <GridItem {...styles.partNumbersGridItem}>
                    <ProductPartNumbers
                        productNumber={product.productNumber}
                        customerProductNumber={product.customerProductNumber}
                        manufacturerItem={product.manufacturerItem}
                        extendedStyles={styles.partNumbersStyles}
                    />
                </GridItem>
            )}
            {variantDisplayTrait && (
                <GridItem {...styles.swatchGridItem}>
                    <ProductListVariantSwatch product={productContext} variantTrait={variantDisplayTrait} />
                </GridItem>
            )}
            {showTextBadges && textBadges && (
                <GridItem {...styles.textBadgeGridItem}>
                    <ProductTextBadges badgeList={textBadges} maxBadges={maxTextBadges ?? 4} />{" "}
                </GridItem>
            )}
            {showImageBadges && imageBadges && (
                <GridItem {...styles.imageBadgeGridItem}>
                    <ProductImageBadges badgeList={imageBadges} maxBadges={maxImageBadges ?? 4} />
                </GridItem>
            )}
            {showAvailability && (
                <GridItem {...styles.availabilityGridItem}>
                    <ProductContextAvailability extendedStyles={styles.availabilityStyles} />
                </GridItem>
            )}
            {showAttributes && (
                <GridItem {...styles.attributesGridItem}>
                    <ProductAttributes maximumNumberAttributeTypes={3} extendedStyles={styles.attributes} />
                </GridItem>
            )}
        </GridContainer>
    );
};

export default connect(mapStateToProps)(withProductContext(ProductListProductInformation));
