import React__default, { useState, useMemo, forwardRef, useImperativeHandle, useCallback, useEffect } from 'react';
import { F as Flag } from './index-c3177e04.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { T as Text } from './index-d0a1200e.js';
import { C as CommonGAssets } from './index-43584299.js';
import { _ as __rest } from './tslib.es6-ab63fd84.js';
import { a as ZINDEX_HEADER, f as VIDEO_DETAIL_TEMP_STORAGE } from './index-a8162282.js';
import { V as VideoType } from './index-91c6a49c.js';
import { createStyles, Stack, Box, rem, Skeleton, AspectRatio, getStylesRef, Flex } from '@mantine/core';
import { a as abbreviateNumber } from './number-d952dba5.js';
import { u as useTranslations } from './index-960c3169.js';
import { useOs } from '@mantine/hooks';
import { M as Modal } from './index-7601f2a1.js';
import { S as SocialLinkPreview } from './index-59432dd7.js';
import { domainLocales } from './constantsDomainLocales.js';
import { Close } from '@hhgtech/icons/core';
import Cookies from 'js-cookie';
import { M as MediaQueries } from './utils-32d7d5af.js';

const ALLOW_DOMAIN_URL = [
    'hellobacsi.com',
    'hellosehat.com',
    'hellodoktor.com',
    'hellokrupet.com',
    'hellodoctor.com.ph',
    'hellokhunmor.com',
    'hellosayarwon.com',
    'helloyishi.com.tw',
    'helloswasthya.com',
    'hellojiankang.com',
    'marrybaby.vn',
    'hellohealth.questionpro.com',
    'hellobacsivn.page.link',
];
const isInternalLink = (url = '') => {
    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
};

const StyledLanguageChangeLink = styled.a `
  display: inline-flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  padding: 7px 11px;
  gap: 2px;

  background: ${theme.colors.white};
  border: 1px solid ${theme.colors.neutral100};
  border-radius: 20px;

  color: ${theme.colors.gray600};
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;

  cursor: pointer;
`;

const StyledSelectionContainer = styled.div `
  position: relative;
  display: inline-block;
`;
const StyledSelectionLabel = styled.div `
  position: relative;
`;
const StyleSelectionPopup = styled.div `
  position: absolute;
  z-index: 21;
  top: 100%;
  right: 0;
  width: 327px;
  padding: 8px;
  background: white;
  border-radius: 4px;
  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));

  &[data-is-open='false'] {
    display: none;
  }
  &[data-show-indicator='true'] {
    &:before {
      position: absolute;
      right: 11px;
      bottom: 100%;
      width: 0;
      height: 0;
      border: 0.5rem solid transparent;
      border-top: none;
      border-bottom-color: #fff;
      content: '';
      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
    }
  }
`;
const StyledOption = styled.div `
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;

  padding: 0 16px;
  border-radius: ${theme.borderRadius};
  cursor: pointer;

  .check-icon {
    width: 16px;
    height: 16px;
  }
  &[data-selected='false'] {
    background-color: ${theme.colors.gray100};
  }
`;
const StyledPopupBackground = styled.div `
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
`;

const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
    const [isOpen, setIsOpen] = useState(false);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(StyledSelectionContainer, null,
            React__default.createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
                React__default.createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index) => (React__default.createElement(StyledOption, { key: index, "data-selected": showSelected && selected === option.value, onClick: (e) => {
                        if (selected !== option.value) {
                            onChange(option.value);
                            setIsOpen((value) => !value);
                        }
                        e.stopPropagation();
                    } },
                    React__default.createElement(Text, { size: "p3" }, option.label),
                    showSelected && selected === option.value && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
        isOpen && (React__default.createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
};

const LanguageSwitcher = ({ languageOptions, locale }) => {
    var _a, _b;
    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
        return null;
    }
    return (React__default.createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default.createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
            if (typeof window !== 'undefined') {
                window.location.href = href;
            }
        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
};
const LanguageLabel = ({ locale, label, href, }) => {
    var _a, _b, _c;
    return (React__default.createElement(StyledLanguageChangeLink, { href: href },
        React__default.createElement(Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
        React__default.createElement("span", null, label)));
};

var useStyles$1 = createStyles((theme, { layout, radius }) => {
    const itemRadius = radius !== null && radius !== void 0 ? radius : 4;
    return {
        root: {
            display: 'block',
            transition: 'all .3s ease',
            '&, & *': {
                borderRadius: itemRadius,
            },
            [theme.fn.largerThan('sm')]: {
                '&:hover': Object.assign(Object.assign({}, (layout === 'overlay' && {
                    '.overlay-info': {
                        transform: 'translateY(-10px)',
                    },
                })), { '.item-overlay-wrapper': {
                        backgroundColor: 'rgba(0,0,0,0.4)',
                    } }),
            },
        },
        inner: Object.assign({ display: 'flex', gap: 8, '&, *': {
                pointerEvents: 'none !important',
            } }, (layout === 'horizon'
            ? {
                gap: 16,
                alignItems: 'center',
            }
            : {
                flexDirection: 'column',
            })),
        itemThumbImg: {
            width: '100%',
            height: '100%',
            objectFit: 'cover',
        },
        thumbFrame: {
            backgroundColor: '#000',
        },
        thumbWrapper: Object.assign({}, (layout === 'horizon' && {
            width: 64,
            flexShrink: 0,
        })),
        overlayWrapper: { transition: 'all .3s ease' },
        overlay: {
            position: 'absolute',
            left: 0,
            bottom: 0,
            right: 0,
            backgroundImage: 'linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111111 100%)',
            minHeight: 96,
            padding: '16px 12px',
            display: 'flex',
            alignItems: 'flex-end',
        },
        overlayInfo: {
            transition: 'all .3s ease',
        },
        title: Object.assign({}, (layout === 'overlay' && {
            color: '#fff',
        })),
        subTitle: Object.assign({ span: {
                margin: '0 4px',
                position: 'relative',
                color: '#595959',
                '&:before': {
                    content: '"."',
                    position: 'absolute',
                    top: -5,
                    fontSize: '14px',
                },
            } }, (layout === 'overlay' && {
            color: '#fff',
        })),
    };
});

const VIDEO_THUMBNAIL_RATIO = 16 / 9;
const SHORT_THUMBNAIL_RATIO = 240 / 431;

function secondsTo24HoursFormat(sec_num = 0) {
    const hours = Math.floor(sec_num / 3600);
    const minutes = Math.floor((sec_num - hours * 3600) / 60);
    const seconds = sec_num - hours * 3600 - minutes * 60;
    let hoursStr = String(hours);
    let minutesStr = String(minutes);
    let secondsStr = String(seconds);
    if (hours < 10) {
        hoursStr = '0' + hours;
    }
    if (minutes < 10) {
        minutesStr = '0' + minutes;
    }
    if (seconds < 10) {
        secondsStr = '0' + seconds;
    }
    return (hours > 0 ? hoursStr + ':' : '') + minutesStr + ':' + secondsStr;
}
function buildVideoSubtitle({ totalView, createTime, formatTotalView, }) {
    return [
        typeof totalView === 'number' ? formatTotalView(totalView) : null,
        createTime,
    ]
        .filter(Boolean)
        .join('<span class="divider">&nbsp;</span>');
}

const ShortsItem = (_a) => {
    var { data, layout, styles, loading = false, radius = 4, hideInfo = false } = _a, boxProps = __rest(_a, ["data", "layout", "styles", "loading", "radius", "hideInfo"]);
    const { title, totalView, imageMedium, createTime } = data;
    const { classes, cx } = useStyles$1({ layout, radius }, {
        name: 'VideoItem__ShortsItem',
        styles,
    });
    const { t } = useTranslations();
    const subTitle = useMemo(() => buildVideoSubtitle({
        totalView,
        createTime,
        formatTotalView: (view) => t('common.totalView', {
            number: abbreviateNumber(view),
        }),
    }), [createTime, t, totalView]);
    const subTitleVisible = Boolean(subTitle);
    const shouldRenderInfo = !hideInfo && (loading || Boolean(title) || subTitleVisible);
    const infoElement = (React__default.createElement(Stack, { spacing: 4, className: cx(classes.overlayInfo, 'overlay-info') },
        React__default.createElement(Box, { sx: {
                position: 'relative',
                minHeight: loading && !title ? rem(44) : undefined,
            } },
            React__default.createElement(Text, { size: "s3", className: cx(classes.title), lineClamp: 2, sx: {
                    visibility: loading && title ? 'hidden' : 'visible',
                } }, title),
            loading && (React__default.createElement(Box, { sx: {
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    top: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 4,
                } },
                React__default.createElement(Skeleton, { height: 22, radius: "sm" }),
                React__default.createElement(Skeleton, { height: 22, radius: "sm" })))),
        (subTitleVisible || loading) && (React__default.createElement(Box, { sx: {
                position: 'relative',
                minHeight: loading && !subTitleVisible ? rem(16) : undefined,
            } },
            subTitleVisible && (React__default.createElement(Text, { className: classes.subTitle, size: "n1", sx: {
                    visibility: loading ? 'hidden' : 'visible',
                }, dangerouslySetInnerHTML: {
                    __html: subTitle,
                } })),
            loading && (React__default.createElement(Box, { sx: {
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    right: 0,
                } },
                React__default.createElement(Skeleton, { height: 16, width: "55%", radius: "sm" })))))));
    return (React__default.createElement(Box, Object.assign({}, boxProps, { className: classes.root }),
        React__default.createElement(Box, { className: classes.inner },
            React__default.createElement("div", { className: classes.thumbWrapper },
                React__default.createElement(AspectRatio, { ratio: SHORT_THUMBNAIL_RATIO, className: classes.thumbFrame },
                    React__default.createElement(Box, { sx: { position: 'relative', width: '100%', height: '100%' } },
                        React__default.createElement("img", { src: imageMedium || '', className: classes.itemThumbImg, alt: title, loading: "lazy", style: {
                                visibility: loading ? 'hidden' : 'visible',
                            } }),
                        loading && (React__default.createElement(Box, { sx: {
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                borderRadius: radius,
                                overflow: 'hidden',
                                zIndex: 1,
                            } },
                            React__default.createElement(Skeleton, { height: "100%", radius: "sm", sx: { display: 'block', lineHeight: 1 } })))),
                    React__default.createElement(Box, { className: cx(classes.overlayWrapper, 'item-overlay-wrapper') },
                        React__default.createElement(Box, { className: cx(classes.overlay, 'item-overlay') }, layout === 'overlay' && shouldRenderInfo && infoElement)))),
            layout !== 'overlay' && shouldRenderInfo && infoElement)));
};

const Play = (_a) => {
    var { size = 24, color = theme.colors.neutral600 } = _a, rest = __rest(_a, ["size", "color"]);
    return (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 47 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
        React__default.createElement("path", { d: "M23.297 43.153c10.55 0 19.103-8.64 19.103-19.298S33.847 4.557 23.297 4.557 4.193 13.197 4.193 23.855s8.553 19.298 19.104 19.298", fill: color, fillOpacity: ".75" }),
        React__default.createElement("path", { d: "m19.477 16.136 11.462 7.719-11.462 7.72z", fill: "#fff", stroke: "#fff", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })));
};

var useStyles = createStyles((theme, { active, layout, radius, useVideoTypeThumbnail }) => {
    const itemRadius = radius !== null && radius !== void 0 ? radius : 4;
    return {
        root: {
            display: 'block',
            borderRadius: itemRadius,
            [theme.fn.largerThan('sm')]: {
                '&:hover': {
                    [`.${getStylesRef('overlay')}`]: Object.assign({}, (!active && {
                        backgroundColor: 'rgba(0, 0, 0, .4)',
                    })),
                },
            },
        },
        inner: Object.assign(Object.assign({ display: 'flex', gap: 8, '&, *': {
                pointerEvents: 'none !important',
            } }, (layout === 'default' && {
            flexDirection: 'column',
        })), (layout === 'horizon' && {
            gap: 12,
            [theme.fn.largerThan('sm')]: {
                gap: 24,
            },
        })),
        thumb: Object.assign({}, (layout === 'horizon' && {
            width: 140,
            flexShrink: 0,
            [theme.fn.largerThan('sm')]: {
                width: 164,
            },
        })),
        thumbWrapper: {},
        thumbFrame: Object.assign({}, (useVideoTypeThumbnail && {
            backgroundColor: '#000',
        })),
        thumbMedia: {
            position: 'relative',
            width: '100%',
            height: '100%',
            overflow: 'hidden',
        },
        thumbBgImage: {
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            transform: 'scale(1.1)',
            filter: 'blur(2px)',
            opacity: 0.4,
        },
        thumbImage: Object.assign({ width: '100%', height: '100%', objectFit: useVideoTypeThumbnail ? 'contain' : 'cover' }, (useVideoTypeThumbnail && {
            position: 'relative',
            zIndex: 1,
        })),
        title: {
            lineHeight: rem(22),
        },
        subTitle: {
            span: {
                margin: '0 4px',
                position: 'relative',
                '&:before': {
                    content: '"."',
                    position: 'absolute',
                    top: -5,
                    fontSize: '14px',
                },
            },
        },
        overlay: {
            ref: getStylesRef('overlay'),
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 3,
            backgroundColor: active ? 'rgba(0, 0, 0, .55)' : 'transparent',
            transition: 'all .2s ease',
            '.play-icon path': {
                '&:first-child': {
                    fill: '#262626',
                },
            },
        },
        duration: {
            position: 'absolute',
            zIndex: 2,
            background: '#262626',
            borderRadius: itemRadius,
            bottom: 4,
            right: 4,
            padding: `${rem(1)} ${rem(4)}`,
        },
        durationTxt: {
            color: '#fff',
        },
    };
});

const VideoItem$1 = (_a) => {
    var { isMobile, data, styles, className, classNames, layout, radius = 4, playIcon, hideInfo = false, loading = false, useVideoTypeThumbnail = false } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout", "radius", "playIcon", "hideInfo", "loading", "useVideoTypeThumbnail"]);
    const { title, imageMedium, createTime, totalView, active, duration } = data;
    const { locale, t } = useTranslations();
    const { cx, classes, theme } = useStyles({ active, layout, radius, useVideoTypeThumbnail }, { name: 'VideoItem__VideoItem', classNames, styles });
    const PlayIcon = playIcon || Play;
    const subTitle = useMemo(() => ({
        visible: Boolean(totalView || createTime),
        formated: buildVideoSubtitle({
            totalView,
            createTime,
            formatTotalView: (view) => t('common.totalView', { number: abbreviateNumber(view) }),
        }),
    }), [createTime, t, totalView]);
    const fallbackThumbSrc = CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
    const thumbSrc = imageMedium || fallbackThumbSrc;
    const handleThumbError = (e) => {
        e.currentTarget.src = fallbackThumbSrc;
    };
    const durationLabel = typeof duration === 'number' && duration > 0
        ? secondsTo24HoursFormat(duration)
        : undefined;
    const shouldRenderVideoInfo = !hideInfo && (loading || Boolean(title) || subTitle.visible);
    return (React__default.createElement(Box, Object.assign({}, boxProps, { className: cx(className, classes.root) }),
        React__default.createElement(Box, { className: classes.inner },
            React__default.createElement(Box, { className: classes.thumbWrapper },
                React__default.createElement(Box, { className: classes.thumb, sx: () => ({
                        position: 'relative',
                        'div, img': {
                            borderRadius: radius,
                        },
                    }) },
                    React__default.createElement(Box, { sx: { position: 'relative', width: '100%' } },
                        React__default.createElement(AspectRatio, { ratio: VIDEO_THUMBNAIL_RATIO, className: classes.thumbFrame },
                            React__default.createElement(Box, { className: classes.thumbMedia },
                                useVideoTypeThumbnail && (React__default.createElement("img", { loading: "lazy", src: thumbSrc, alt: "", "aria-hidden": true, className: classes.thumbBgImage, style: {
                                        visibility: loading ? 'hidden' : 'visible',
                                    }, onError: handleThumbError })),
                                React__default.createElement("img", { loading: "lazy", src: thumbSrc, alt: title, className: classes.thumbImage, style: {
                                        visibility: loading ? 'hidden' : 'visible',
                                    }, onError: handleThumbError }))),
                        loading && (React__default.createElement(Box, { sx: {
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                borderRadius: radius,
                                overflow: 'hidden',
                                zIndex: 2,
                            } },
                            React__default.createElement(Skeleton, { height: "100%", radius: "sm", sx: { display: 'block', lineHeight: 1 } })))),
                    durationLabel && (React__default.createElement(Box, { className: classes.duration, sx: { zIndex: loading ? 3 : undefined } },
                        React__default.createElement(Box, { sx: { position: 'relative' } },
                            React__default.createElement(Text, { size: "n1", className: classes.durationTxt, sx: {
                                    visibility: loading ? 'hidden' : 'visible',
                                } }, durationLabel),
                            loading && (React__default.createElement(Box, { sx: {
                                    position: 'absolute',
                                    inset: 0,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                } },
                                React__default.createElement(Skeleton, { width: 40, height: 14, radius: "sm" })))))),
                    React__default.createElement(Flex, { className: classes.overlay, align: 'center', justify: 'center', sx: {
                            visibility: loading ? 'hidden' : 'visible',
                        } }, active ? (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default.createElement(PlayIcon, { className: "play-icon", size: isMobile ? 32 : 46 }))))),
            shouldRenderVideoInfo && (React__default.createElement(Stack, { className: "video-info", sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
                React__default.createElement(Box, { sx: {
                        position: 'relative',
                        minHeight: loading && !title ? rem(44) : undefined,
                    } },
                    React__default.createElement(Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2, sx: {
                            visibility: loading && title ? 'hidden' : 'visible',
                        } }, title),
                    loading && (React__default.createElement(Box, { sx: {
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            display: 'flex',
                            flexDirection: 'column',
                            gap: 4,
                        } },
                        React__default.createElement(Skeleton, { height: 22, radius: "sm" }),
                        React__default.createElement(Skeleton, { height: 22, radius: "sm" })))),
                (subTitle.visible || loading) && (React__default.createElement(Box, { sx: {
                        position: 'relative',
                        minHeight: loading && !subTitle.visible ? rem(16) : undefined,
                    } },
                    subTitle.visible && (React__default.createElement(Text, { className: classes.subTitle, size: "n1", color: "#595959", sx: {
                            visibility: loading ? 'hidden' : 'visible',
                        }, dangerouslySetInnerHTML: {
                            __html: subTitle.formated,
                        } })),
                    loading && (React__default.createElement(Box, { sx: {
                            position: 'absolute',
                            left: 0,
                            top: 0,
                            right: 0,
                        } },
                        React__default.createElement(Skeleton, { height: 16, width: "55%", radius: "sm" }))))))))));
};

const VideoPlayerModal = (_a) => {
    var { data, isMobile } = _a, rest = __rest(_a, ["data", "isMobile"]);
    const { type, url } = data;
    const os = useOs();
    const isIos = os === 'ios';
    return (React__default.createElement(Modal, Object.assign({ size: type === VideoType.SHORTS ? (isMobile ? 360 : 375) : rem(1128), withCloseButton: true, styles: (theme) => ({
            header: {
                padding: 0,
                paddingBottom: 8,
                backgroundColor: 'transparent',
                border: 0,
                [theme.fn.smallerThan('sm')]: {
                    position: 'absolute',
                    top: 10,
                    right: 10,
                },
            },
            body: {
                padding: 0,
            },
            content: {
                boxShadow: 'none',
                backgroundColor: 'transparent',
                borderRadius: 0,
                [theme.fn.largerThan('sm')]: {
                    position: 'relative',
                },
            },
            heading: {
                [theme.fn.smallerThan('sm')]: {},
            },
            inner: {
                zIndex: ZINDEX_HEADER + 2,
                [theme.fn.smallerThan('sm')]: {
                    padding: 0,
                },
            },
            close: {
                color: '#fff',
                backgroundColor: '#000',
                borderRadius: '50%',
                width: 24,
                height: 24,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                transition: 'all .3s ease',
                svg: {
                    width: '18px !important',
                    height: '18px !important',
                },
                '&:hover': {
                    backgroundColor: '#fff',
                    color: '#000',
                },
            },
            overlay: {
                zIndex: ZINDEX_HEADER + 1,
                [theme.fn.smallerThan('sm')]: {
                    backgroundColor: 'rgba(0, 0, 0, 0.85)',
                },
            },
        }) }, rest),
        React__default.createElement(SocialLinkPreview, { key: url, url: url || '', autoPlay: !isIos, isShort: type === VideoType.SHORTS, autoScaleByVideoType: true })));
};

const VideoItem = forwardRef((_a, ref) => {
    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile, loading, hideInfo = false, useVideoTypeThumbnail = false } = _a, props = __rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile", "loading", "hideInfo", "useVideoTypeThumbnail"]);
    const { articleLink, id, videoId, title, url, type } = data;
    const [showModal, setShowModal] = useState(false);
    const href = articleLink || `/videos/${type}/?id=${id}`;
    const { locale } = useTranslations();
    const dataEventLabel = useMemo(() => `https://${domainLocales[locale]}${href}`, [href, locale]);
    const persistVideoDetailForLanding = () => {
        localStorage.setItem(VIDEO_DETAIL_TEMP_STORAGE, JSON.stringify({
            articleLink,
            id,
            videoId,
            title,
            url,
            type,
        }));
    };
    const handleDefaultClick = (e) => {
        if (redirectToLandingPage) {
            persistVideoDetailForLanding();
            return;
        }
        e.preventDefault();
        setShowModal(true);
    };
    useImperativeHandle(ref, () => ({
        open: () => {
            if (articleLink)
                return;
            if (redirectToLandingPage) {
                persistVideoDetailForLanding();
                return;
            }
            setShowModal(true);
        },
        close: () => setShowModal(false),
    }), [articleLink, redirectToLandingPage, id, videoId, title, url, type]);
    const commonProps = {
        component: 'a',
        href,
        target: articleLink ? '_blank' : '_self',
        'data-event-category': dataEventCategory,
        'data-event-action': dataEventAction,
        'data-event-label': dataEventLabel,
        onClick: disableDefaultFn
            ? onClick
            : !articleLink
                ? handleDefaultClick
                : undefined,
    };
    return (React__default.createElement(React__default.Fragment, null,
        type === VideoType.SHORTS && !useVideoTypeThumbnail ? (React__default.createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile, loading: loading, hideInfo: hideInfo }))) : (React__default.createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading, hideInfo: hideInfo, useVideoTypeThumbnail: useVideoTypeThumbnail }))),
        !articleLink && (React__default.createElement(VideoPlayerModal, { opened: Boolean(showModal), data: data, onClose: () => setShowModal(false), isMobile: isMobile }))));
});
VideoItem.displayName = 'VideoItem';

const siteWideBg = CommonGAssets.getAssetPath('sitewide/vn-public-desktop.png');
const StyledsiteWideContainer = styled.div `
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  background-color: ${(props) => props.bgColor || '#284a75'};
  background-position: center;
  background-size: cover;
  transition: height 0.25s;
  &[data-is-mobile='true'] {
    justify-content: flex-start;
  }
  &[data-is-mobile='false'] {
    justify-content: center;
  }

  &[data-is-collapse='false'] {
    height: 64px;
  }
  &[data-is-collapse='true'] {
    height: 0;
  }

  ${MediaQueries.mbDown} {
    &[data-is-collapse='false'] {
      height: 48px;
    }
  }

  &[data-is-vn-public-day='true'] {
    background-color: ${theme.colors.red900};
    ${MediaQueries.mbDown} {
      overflow: hidden;
    }
    ${MediaQueries.mbUp} {
      background-image: url(${siteWideBg});
      background-repeat: no-repeat;
      background-size: cover;

      .vn-bg {
        display: none;
      }
    }
  }

  .banner-full {
    object-fit: cover;
    height: 100%;
  }

  & > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  > a + .site-wide-content {
    width: 100%;
  }

  .content {
    padding-right: 48px;
    color: white;
    a {
      color: white;
    }
    &[data-is-mobile='true'] {
      font-size: 14px;
    }
    ${MediaQueries.mbDown} {
      line-height: 18px;
    }
  }
  .close-icon {
    position: absolute;
    right: 0px;
    width: 64px;
    height: 64px;
    padding: 0 20px;
    cursor: pointer;
  }

  [data-event-category] {
    * {
      pointer-events: none !important;
    }
  }
`;
const StyledIcon = styled.div `
  max-width: 100px;
  margin-right: 16px;
  .image-wrapper {
    display: inline-block;
    overflow: hidden;
    max-width: 100px;
    padding: 8px 0 4px 16px;
    img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      &[data-is-mobile='true'] {
        width: 52px;
        height: 52px;
      }
    }
  }
`;

const SITE_WIDE_EXPIRES = {
    daily: 1,
    weekly: 7,
    'bi-weekly': 14,
};
const SiteWideBanner = ({ site = 'discover', banner, isMobile, onClose, currentUrl, }) => {
    var _a;
    const { link, icon, content, type, layoutType, bannerDesktop, bannerMobile, backgroundColor, bannerDisplayFrequency, } = banner || {};
    const [show, setShow] = useState(true);
    const formattedContent = content;
    const cookieName = useMemo(() => `${site}-disable-sitewide-${type}`, [type]);
    const handleCLoseSitewide = useCallback((event) => {
        event.preventDefault();
        Cookies.set(cookieName, 'true', {
            expires: SITE_WIDE_EXPIRES[bannerDisplayFrequency],
        });
        setShow(false);
        onClose === null || onClose === void 0 ? void 0 : onClose();
    }, [currentUrl, cookieName, bannerDisplayFrequency]);
    const dataVarsEventLabel = (_a = /<a[^>]*href=["']([^"']*)["']/g.exec(formattedContent)) === null || _a === void 0 ? void 0 : _a[1];
    // TODO: Remove useEffect and use the value directly
    // --> as the useEffect cause flickering
    useEffect(() => {
        if (Cookies.get(cookieName) === 'true') {
            setShow(false);
        }
    }, [banner === null || banner === void 0 ? void 0 : banner.type]);
    if (!formattedContent || !show) {
        return null;
    }
    return (React__default.createElement(StyledsiteWideContainer, { "data-is-mobile": isMobile, "data-is-collapse": !show, 
        // data-is-vn-public-day={isVNPublicDay}
        id: "sitewide-container", bgColor: backgroundColor },
        React__default.createElement("a", { className: `no-replace-click`, "data-event-category": "Header Banner", "data-event-action": "Link Click", "data-event-label": currentUrl, href: link || dataVarsEventLabel }, layoutType === 'icon-text' ? (React__default.createElement(React__default.Fragment, null,
            icon && (React__default.createElement(StyledIcon, { className: "site-wide-content" },
                React__default.createElement("div", { className: "image-wrapper" },
                    React__default.createElement("img", { src: icon, className: "icon", loading: "lazy", "data-is-mobile": isMobile, alt: "", width: 64, height: 64 })))),
            React__default.createElement("div", { className: "site-wide-content" }, formattedContent && (React__default.createElement(Text, { size: "s3", className: "content", "data-is-mobile": isMobile, dangerouslySetInnerHTML: { __html: formattedContent }, lineClamp: 2, styles: {
                    root: {
                        fontFamily: `${process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'km-KH'
                            ? 'Battambang,'
                            : process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'th-TH'
                                ? 'Noto Sans Thai,'
                                : 'Inter,'} -apple-system,
                    BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell,
                    'Helvetica Neue', sans-serif;`,
                    },
                } }))))) : (React__default.createElement("img", { src: isMobile ? bannerMobile : bannerDesktop, className: "banner-full", loading: "lazy", "data-is-mobile": isMobile, alt: "" }))),
        React__default.createElement(Close, { color: "#fff", size: 24, className: "close-icon", "data-event-category": "Header Banner", "data-event-action": "Close Click", "data-vars-event-label": currentUrl, onClick: handleCLoseSitewide })));
};

export { LanguageSwitcher as L, SiteWideBanner as S, VideoItem as V, VideoPlayerModal as a, isInternalLink as i };
