import { ProductContextModel } from "@insite/client-framework/Components/ProductContext";
import { BadgeImagePlacementValues, BadgeTypeValues } from "@insite/client-framework/Types/ApiModels";
import InjectableCss from "@insite/mobius/utilities/InjectableCss";
import { useRef } from "react";

interface Props {
    productContext: ProductContextModel;
    showTextBadge?: boolean;
    showImageBadge?: boolean;
    styles?: { badgeTextWrapper?: InjectableCss; badgeImageWrapper?: InjectableCss };
}

/**
 * Manages the positioning for badges that overlay a product image.
 * @param props
 */
const useOverlayBadge = ({ productContext, showTextBadge, showImageBadge, styles }: Props) => {
    let showOverlayBadge = false;
    let overlayBadge = null;
    let overlayBadgeWrapperStyles = null;

    if (productContext.product.badges && productContext.product.badges.length > 0) {
        let visibleBadges = productContext.product.badges.filter(badge => badge.displayOnProductImages);

        if (!showImageBadge && visibleBadges.length > 0) {
            visibleBadges = visibleBadges.filter(badge => badge.badgeType !== BadgeTypeValues.Image);
        }

        if (!showTextBadge && visibleBadges.length > 0) {
            visibleBadges = visibleBadges.filter(badge => badge.badgeType !== BadgeTypeValues.Text);
        }

        if (visibleBadges.length > 0) {
            overlayBadge = visibleBadges[0];
            showOverlayBadge = true;
            overlayBadgeWrapperStyles =
                overlayBadge.badgeType === "Image" ? styles?.badgeImageWrapper : styles?.badgeTextWrapper;
            const width = overlayBadge.badgeType === "Image" ? 25 : 50;
            let positioning = "";

            // everything with be a few percentages off of the absolute edge
            if (overlayBadge.largeImagePlacement) {
                switch (overlayBadge.largeImagePlacement) {
                    case BadgeImagePlacementValues.TopLeft:
                        positioning = "left: 2%; top: 2%;";
                        break;
                    case BadgeImagePlacementValues.TopCenter:
                        positioning = `left: ${(100 - width) / 2}%; top: 2%;`;
                        break;
                    case BadgeImagePlacementValues.TopRight:
                        positioning = "right: 2%; top: 2%;";
                        break;
                    case BadgeImagePlacementValues.BottomLeft:
                        positioning = "left: 2%; bottom: 2%;";
                        break;
                    case BadgeImagePlacementValues.BottomCenter:
                        positioning = `left: ${(100 - width) / 2}%; bottom: 2%;`;
                        break;
                    case BadgeImagePlacementValues.BottomRight:
                        positioning = "right: 2%; bottom: 2%;";
                        break;
                    default:
                        positioning = "left: 2%; top: 2%;";
                }

                if (overlayBadgeWrapperStyles?.css) {
                    // insert badge positional data
                    overlayBadgeWrapperStyles.css = overlayBadgeWrapperStyles.css.concat(positioning);
                }
            }
        }
    }

    const badgeAreaWrapperRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);
    const overlayBadgeWrapperClickHandler = () => {
        if (badgeAreaWrapperRef.current) {
            (badgeAreaWrapperRef.current.firstChild as HTMLLinkElement).click();
        }
    };

    return {
        showOverlayBadge,
        overlayBadge,
        overlayBadgeWrapperStyles,
        badgeAreaWrapperRef,
        overlayBadgeWrapperClickHandler,
    };
};

export default useOverlayBadge;
