import { ProductInfo } from "@insite/client-framework/Common/ProductInfo";
import { ProductContextModel } from "@insite/client-framework/Components/ProductContext";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import translate from "@insite/client-framework/Translate";
import {
    AvailabilityMessageType,
    ProductDto,
    WishListLineModel,
    WishListModel,
} from "@insite/client-framework/Types/ApiModels";
import ProductPartNumbers, { ProductPartNumbersStyles } from "@insite/content-library/Components/ProductPartNumbers";
import Checkbox, { CheckboxPresentationProps, CheckboxProps } from "@insite/mobius/Checkbox";
import Clickable, { ClickablePresentationProps } from "@insite/mobius/Clickable";
import GridContainer, { GridContainerProps } from "@insite/mobius/GridContainer";
import GridItem, { GridItemProps } from "@insite/mobius/GridItem";
import Hidden, { HiddenProps } from "@insite/mobius/Hidden";
import Link, { LinkPresentationProps } from "@insite/mobius/Link";
import OverflowMenu, { OverflowMenuPresentationProps } from "@insite/mobius/OverflowMenu";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import React from "react";
import { connect, ResolveThunks } from "react-redux";
import styled, { css } from "styled-components";

interface OwnProps {
    wishList: WishListModel;
    wishListLine: WishListLineModel;
    productContext: ProductContextModel;
    isSelected: boolean;
    selectChangeHandler: CheckboxProps["onChange"];
    onViewReplacementProduct?: (wishListLine: WishListLineModel) => void;
    onDeleteClick: (wishListLine: WishListLineModel) => void;
}

const mapStateToProps = (state: ApplicationState, ownProps: OwnProps) => {
    const replacementProductInfo =
        state.pages.myListDetails.replacementProductInfosByWishListLineId[ownProps.wishListLine.id];

    return {
        replacementProductInfo,
    };
};

type Props = OwnProps & ReturnType<typeof mapStateToProps>;

export interface MyListsDetailsDiscontinuedProductListLineStyles {
    selectedCheckbox?: CheckboxPresentationProps;
    restrictedDescriptionText?: TypographyPresentationProps;
    productPartNumbersStyles?: ProductPartNumbersStyles;
    deleteLink?: LinkPresentationProps;
    discontinuedChipGridItem?: GridItemProps;
    disconitnuedDeleteOverflow?: GridItemProps;
    discontinuedGridContainer?: GridContainerProps;
    disconitnuedDelete?: GridItemProps;
    discontinuedDescriptionGridItem?: GridItemProps;
    discontinuedTagGridContainer?: GridContainerProps;
    replacementItemGridItem?: GridItemProps;
    viewReplacementLink?: LinkPresentationProps;
    discontinuedSelectedCheckboxHidden?: HiddenProps;
    innerGridContainer?: GridContainerProps;
    viewReplacementGridItem?: GridItemProps;
    chipGridItem?: GridItemProps;
    discontinuedLineContainer?: GridContainerProps;
    discontinuedProductInfoGridItem?: GridItemProps;
    discontinuedPartNumbersGridItem?: GridItemProps;
    chipTypographyStyles?: TypographyPresentationProps;
    disconitnuedDeleteOverflowMenu?: OverflowMenuPresentationProps;
    discontinuedOverflowDeleteClickable?: ClickablePresentationProps;
}

export const discontinuedProductListLineStyles: MyListsDetailsDiscontinuedProductListLineStyles = {
    deleteLink: {
        typographyProps: { size: 12 },
        css: css`
            margin-top: 10px;
        `,
    },
    productPartNumbersStyles: {
        erpNumberGridItem: {
            css: css`
                flex-direction: column;
            `,
        },
        erpNumberLabelText: { variant: "legend" },
        customerNameGridItem: {
            css: css`
                flex-direction: column;
            `,
        },
        customerNameLabelText: { variant: "legend" },
        manufacturerItemGridItem: {
            css: css`
                flex-direction: column;
            `,
        },
        manufacturerItemLabelText: { variant: "legend" },
    },
    selectedCheckbox: {
        sizeVariant: "small",
        css: css`
            @media print {
                display: none;
            }
            margin-right: 10px;
        `,
    },
    discontinuedChipGridItem: {
        width: [4, 4, 4, 4, 4],
        printWidth: 5,
        css: css``,
    },

    replacementItemGridItem: {
        width: [10, 10, 10, 10, 10],
        css: css``,
    },
    disconitnuedDeleteOverflow: {
        width: [2, 2, 0, 0, 0],
    },
    disconitnuedDelete: {
        width: [0, 0, 2, 2, 2],
        css: css`
            flex-direction: column;
            align-items: center;
        `,
    },
    discontinuedGridContainer: {
        gap: 20,
        css: css`
            padding: 5px;
        `,
    },
    discontinuedDescriptionGridItem: {
        width: 12,
    },

    discontinuedTagGridContainer: {
        gap: 10,
        css: css`
            padding: 5px;
        `,
    },
    viewReplacementGridItem: {
        width: [12, 12, 8, 9, 9],
        css: css`
            align-items: center;
        `,
    },
    chipGridItem: {
        width: [12, 12, 4, 3, 3],
        css: css`
            align-items: center;
        `,
    },
    viewReplacementLink: {
        typographyProps: {
            size: 14,
        },
    },
    discontinuedSelectedCheckboxHidden: {
        below: "md",
        css: css`
            height: 100%;
        `,
    },
    innerGridContainer: {
        gap: 5,
    },

    discontinuedLineContainer: {
        gap: 10,
    },

    discontinuedProductInfoGridItem: {
        width: 10,
    },

    discontinuedPartNumbersGridItem: {
        width: 12,
    },

    chipTypographyStyles: {},
};

const Chip = styled.div`
    text-align: center;
    padding: 5px;
    background-color: #fcefc7;
    color: #000;
    border-radius: 5px;
`;

const styles = discontinuedProductListLineStyles;

const MyListDetailsDiscontinuedProductListLine: React.FC<Props> = ({
    isSelected,
    selectChangeHandler,
    productContext,
    onViewReplacementProduct,
    onDeleteClick,
    wishList,
    wishListLine,
    replacementProductInfo,
}) => {
    const product = productContext.product;
    const canEditWishList = (wishList.allowEdit || !wishList.isSharedList) && !wishList.isAutogenerated;
    const showViewReplacementProduct =
        canEditWishList &&
        wishListLine.replacementProduct?.canAddToWishlist &&
        !isReplacementProductDiscontinued(wishListLine.replacementProduct, replacementProductInfo);

    return (
        <GridContainer
            {...styles.discontinuedLineContainer}
            className="wishlist-discontinued-line-grid-container"
            data-test-selector={`${wishListLine.productId}_${wishListLine.selectedUnitOfMeasure}`}
        >
            <GridItem {...styles.discontinuedProductInfoGridItem}>
                <Hidden>
                    <Checkbox
                        {...styles.selectedCheckbox}
                        checked={isSelected}
                        onChange={selectChangeHandler}
                        hiddenIconText={translate("Select")}
                        data-test-selector="myListDetails_selectRowCheckbox"
                    />
                </Hidden>
                <GridContainer {...styles.innerGridContainer}>
                    <GridItem
                        {...styles.discontinuedDescriptionGridItem}
                        className="wishlist-discontinued-line-description-grid-item"
                    >
                        <Typography
                            {...styles.restrictedDescriptionText}
                            className="wishlist-discontinued-line-description-text"
                        >
                            {wishListLine.shortDescription}
                        </Typography>
                    </GridItem>

                    <GridItem
                        {...styles.discontinuedPartNumbersGridItem}
                        className="wishlist-discontinued-line-product-part-number-grid-item"
                    >
                        <ProductPartNumbers
                            productNumber={product.productNumber}
                            customerProductNumber={product.customerProductNumber}
                            manufacturerItem={product.manufacturerItem}
                            extendedStyles={styles.productPartNumbersStyles}
                        />
                    </GridItem>

                    <GridItem {...styles.chipGridItem} className="wishlist-discontinued-line-chip-grid-item">
                        <Chip>
                            <Typography {...styles.chipTypographyStyles} data-test-selector="discontinuedProduct">
                                {translate("Product Discontinued")}
                            </Typography>
                        </Chip>
                    </GridItem>
                    <GridItem {...styles.viewReplacementGridItem}>
                        {showViewReplacementProduct && (
                            <Link
                                className="wishlist-discontinued-line-view-replacement-link"
                                {...styles.viewReplacementLink}
                                onClick={() => onViewReplacementProduct?.(wishListLine)}
                                data-test-selector="replacementProductLink"
                            >
                                {translate("View Replacement Product")}
                            </Link>
                        )}
                    </GridItem>
                </GridContainer>
            </GridItem>
            <GridItem {...styles.disconitnuedDelete}>
                {canEditWishList && (
                    <Link
                        {...styles.deleteLink}
                        onClick={() => onDeleteClick(wishListLine)}
                        data-test-selector="deleteListItem"
                        className="wishlist-discontinued-line-delete-link"
                    >
                        {translate("Delete")}
                    </Link>
                )}
            </GridItem>
            <GridItem {...styles.disconitnuedDeleteOverflow}>
                {canEditWishList && (
                    <OverflowMenu {...styles.disconitnuedDeleteOverflowMenu} position="end">
                        <Clickable
                            {...styles.discontinuedOverflowDeleteClickable}
                            onClick={() => onDeleteClick(wishListLine)}
                        >
                            {translate("Delete")}
                        </Clickable>
                    </OverflowMenu>
                )}
            </GridItem>
        </GridContainer>
    );
};

function isReplacementProductDiscontinued(replacementProduct: ProductDto, productInfo: ProductInfo | undefined) {
    if (!replacementProduct || !productInfo) {
        return true;
    }
    const availability = productInfo.inventory?.inventoryAvailabilityDtos?.find(
        o => o.unitOfMeasure.toLowerCase() === productInfo.unitOfMeasure.toLowerCase(),
    )?.availability;

    return replacementProduct.isDiscontinued && availability?.messageType === AvailabilityMessageType.OutOfStock;
}

export default connect(mapStateToProps)(MyListDetailsDiscontinuedProductListLine);
