"use client";
import * as streamingAvailability from "streaming-availability";
import React, { useEffect, useState } from "react";
import { StringUtils } from "../utils/StringUtils";
import { English } from "../translations/English";
import { clsx } from "clsx";
import styles from "./Poster.module.css";
import { getShowById } from "../actions/Actions";
const posterTypeVertical = "vertical";
const posterTypeHorizontal = "horizontal";
const catalogLogoTypeLight = "light";
const catalogLogoTypeDark = "dark";
const catalogLogoTypeWhite = "white";
function verticalImageToSrcset(image) {
    return [
        `${image.w240} 240w`,
        `${image.w360} 360w`,
        `${image.w480} 480w`,
        `${image.w600} 600w`,
        `${image.w720} 720w`,
    ].join(", ");
}
function horizontalImageToSrcset(image) {
    return [
        `${image.w360} 360w`,
        `${image.w480} 480w`,
        `${image.w720} 720w`,
        `${image.w1080} 1080w`,
        `${image.w1440} 1440w`,
    ].join(", ");
}
function getShowPoster(posterType, show) {
    return {
        srcSet: getShowPosterSrcset(posterType, show),
        alt: show.title,
    };
}
function getShowPosterSrcset(posterType, show) {
    if (posterType === posterTypeVertical) {
        return verticalImageToSrcset(show.imageSet.verticalPoster);
    }
    return horizontalImageToSrcset(show.imageSet.horizontalPoster);
}
function utilizeAddon(streamingOptionType, addon, f) {
    if (streamingOptionType !== streamingAvailability.StreamingOptionType.Addon || addon === undefined) {
        return;
    }
    f(addon);
}
function getStreamingInfoFromChange(change, catalogLogoType, convertChangeToText) {
    let catalogLogoSrc;
    let catalogLogoAlt;
    let link;
    let text;
    utilizeAddon(change.streamingOptionType, change.addon, (addon) => {
        catalogLogoSrc = getCatalogLogo(catalogLogoType, addon.imageSet);
        catalogLogoAlt = addon.name;
    });
    if (StringUtils.isBlank(catalogLogoSrc)) {
        catalogLogoSrc = getCatalogLogo(catalogLogoType, change.service.imageSet);
    }
    if (StringUtils.isBlank(catalogLogoAlt)) {
        catalogLogoAlt = change.service.name;
    }
    link = change.link;
    if (StringUtils.isBlank(link)) {
        utilizeAddon(change.streamingOptionType, change.addon, (addon) => {
            link = addon.homePage;
        });
    }
    if (StringUtils.isBlank(link)) {
        link = change.service.homePage;
    }
    text = (convertChangeToText ?? English.convertChangeToText)(change);
    return {
        catalogLogo: {
            src: catalogLogoSrc,
            alt: catalogLogoAlt,
        },
        link: link,
        text: text,
    };
}
function getStreamingInfoFromStreamingOption(option, catalogLogoType) {
    let catalogLogoSrc;
    let catalogLogoAlt;
    let link;
    utilizeAddon(option.type, option.addon, (addon) => {
        catalogLogoSrc = getCatalogLogo(catalogLogoType, addon.imageSet);
        catalogLogoAlt = addon.name;
    });
    if (StringUtils.isBlank(catalogLogoSrc)) {
        catalogLogoSrc = getCatalogLogo(catalogLogoType, option.service.imageSet);
    }
    if (StringUtils.isBlank(catalogLogoAlt)) {
        catalogLogoAlt = option.service.name;
    }
    link = option.link;
    if (StringUtils.isBlank(link)) {
        utilizeAddon(option.type, option.addon, (addon) => {
            link = addon.homePage;
        });
    }
    if (StringUtils.isBlank(link)) {
        link = option.service.homePage;
    }
    return {
        catalogLogo: {
            src: catalogLogoSrc,
            alt: catalogLogoAlt,
        },
        link: link,
    };
}
function doesCatalogMatchWithStreamingOption(catalog, streamingOption) {
    if (catalog.service !== streamingOption.service.id) {
        return false;
    }
    if (!catalog.streamingOptionType) {
        return true;
    }
    if (catalog.streamingOptionType !== streamingOption.type) {
        return false;
    }
    if (catalog.streamingOptionType === streamingAvailability.StreamingOptionType.Addon) {
        if (!catalog.addon) {
            return true;
        }
        if (catalog.addon !== streamingOption.addon?.id) {
            return false;
        }
    }
    return true;
}
function pickHighlightedStreamingOption(streamingOptions, priorityCatalogs) {
    if (!streamingOptions || streamingOptions.length === 0) {
        return undefined;
    }
    if (priorityCatalogs) {
        for (const catalog of priorityCatalogs) {
            const streamingOption = streamingOptions.find((streamingOption) => doesCatalogMatchWithStreamingOption(catalog, streamingOption));
            if (streamingOption) {
                return streamingOption;
            }
        }
    }
    const freeOrSubscription = streamingOptions.find((streamingOption) => streamingOption.type === streamingAvailability.StreamingOptionType.Subscription || streamingOption.type === streamingAvailability.StreamingOptionType.Free);
    if (freeOrSubscription) {
        return freeOrSubscription;
    }
    const addon = streamingOptions.find((streamingOption) => streamingOption.type === streamingAvailability.StreamingOptionType.Addon);
    if (addon) {
        return addon;
    }
    return streamingOptions[0];
}
function getStreamingInfo(props, show) {
    if (props.highlightedChange) {
        return getStreamingInfoFromChange(props.highlightedChange, props.catalogLogoType, props.convertChangeToText);
    }
    const highlightedStreamingOption = pickHighlightedStreamingOption(show.streamingOptions[props.country], props.priorityCatalogs);
    if (!highlightedStreamingOption) {
        return undefined;
    }
    return getStreamingInfoFromStreamingOption(highlightedStreamingOption, props.catalogLogoType);
}
function getCatalogLogo(catalogLogoType = catalogLogoTypeDark, serviceImageSet) {
    switch (catalogLogoType) {
        case catalogLogoTypeLight:
            return serviceImageSet.lightThemeImage;
        case catalogLogoTypeDark:
            return serviceImageSet.darkThemeImage;
        case catalogLogoTypeWhite:
            return serviceImageSet.whiteImage;
    }
}
function getPosterContent(props, show) {
    const posterType = props.posterType ?? posterTypeHorizontal;
    return {
        showPoster: getShowPoster(posterType, show),
        posterType: posterType,
        streamingInfo: getStreamingInfo(props, show),
    };
}
function getContainerAnchorProps(content, props) {
    const { className, target, href, ...rest } = props ?? {};
    return {
        className: clsx(styles.container, className),
        target: target ?? "_blank",
        href: content.streamingInfo?.link,
        ...rest
    };
}
function getPosterImageProps(content, props) {
    const { className, srcSet, src, alt, ...rest } = props ?? {};
    return {
        className: clsx(styles.poster, {
            [styles["poster-vertical"]]: content.posterType === posterTypeVertical,
            [styles["poster-horizontal"]]: content.posterType === posterTypeHorizontal,
        }, className),
        srcSet: content.showPoster.srcSet,
        alt: content.showPoster.alt,
        ...rest
    };
}
function getCatalogLogoImageProps(content, props) {
    const { className, srcSet, src, alt, ...rest } = props ?? {};
    return {
        className: clsx(styles.logo, className),
        src: content.streamingInfo?.catalogLogo.src,
        alt: content.streamingInfo?.catalogLogo.alt,
        ...rest
    };
}
function getTextDivProps(props) {
    const { className, ...rest } = props ?? {};
    return {
        className: clsx(styles.text, className),
        ...rest
    };
}
/**
 * The Poster component displays a poster image of a show with a streaming catalog logo.
 *
 * The provided Poster is a clickable anchor that deep-links to show's page on the streaming service.
 *
 * @category Components
 */
export function Poster(props) {
    const { showId, show } = props;
    const [data, setData] = useState(undefined);
    useEffect(() => {
        if (show) {
            setData(show);
        }
        else if (showId) {
            getShowById({ id: showId, country: props.country }).then(setData);
        }
    }, [props.country, setData, show, showId]);
    if (!show && !showId) {
        throw new Error("Either show or showId must be provided");
    }
    if (!data) {
        return null;
    }
    const posterContent = getPosterContent(props, data);
    const catalogLogoImageProps = getCatalogLogoImageProps(posterContent, props.catalogLogoImageProps);
    if (StringUtils.isBlank(catalogLogoImageProps.src) && props.hidePosterIfNoStreamingOption) {
        return null;
    }
    return (<a {...getContainerAnchorProps(posterContent, props.posterContainerAnchorProps)}>
			<img {...getPosterImageProps(posterContent, props.posterImageProps)}/>
			{catalogLogoImageProps.src && <img {...catalogLogoImageProps}/>}
			{posterContent.streamingInfo?.text && <div {...getTextDivProps(props.textDivProps)}>{posterContent.streamingInfo.text}</div>}
		</a>);
}
//# sourceMappingURL=Poster.jsx.map