import { Box, CopyClipboard, Popover, Text, TextButton, } from '@wix/design-system';
import React, { useEffect, useMemo } from 'react';
import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common';
export const RequestId = (props) => {
    const { value, appearance, locale, dataHook = 'request-id' } = props;
    const firstValue = value.split(',')[0];
    const [messages, setMessages] = React.useState(null);
    useEffect(() => {
        const loadMessages = async () => {
            try {
                const module = await import(
                /* webpackChunkName: `request-id-locale-messages-[request]-json` */ `./assets/locale/messages_${locale}.json`);
                setMessages(module.default);
            }
            catch (error) {
                setMessages(require('./assets/locale/messages_en.json'));
            }
        };
        loadMessages();
    }, [locale]);
    const [shown, setShown] = React.useState(false);
    const openPopover = () => setShown(true);
    const closePopover = () => setShown(false);
    const appearanceStyle = useMemo(() => {
        if (appearance === 'light') {
            return {
                infoIconColor: 'var(--wsr-color-D40, #868aa5)',
                textSize: 'small',
                textLight: true,
            };
        }
        return {
            infoIconColor: 'var(--wsr-color-100, #116DFF)',
            textSize: 'tiny',
            textLight: false,
        };
    }, [appearance]);
    return (React.createElement(Box, { gap: "3px", dataHook: dataHook, justifyItems: "center" },
        React.createElement(Box, { placeItems: "center" },
            React.createElement(Text, { size: appearanceStyle.textSize, weight: "thin", light: appearanceStyle.textLight, secondary: true, dataHook: "request-id-value" }, `Request ID: ${firstValue}`)),
        React.createElement(Popover, { showArrow: true, animate: true, placement: "auto", shown: shown, onMouseEnter: () => openPopover(), onMouseLeave: () => closePopover(), dataHook: "request-id-popover", zIndex: 6000, appendTo: "window" },
            React.createElement(Popover.Element, null,
                React.createElement(Box, null,
                    React.createElement(TextButton, { size: "small", as: "button", ariaLabel: "click me for details", dataHook: "request-id-trigger-element", prefixIcon: React.createElement(InfoCircleSmall, { fill: appearanceStyle.infoIconColor, cursor: "default" }) }))),
            React.createElement(Popover.Content, null,
                React.createElement(Box, { padding: "24px 24px", width: 350, display: "block" },
                    React.createElement("div", null,
                        React.createElement(Text, { size: "small", skin: "standard", weight: "thin", dataHook: "request-id-description" }, messages?.description)),
                    React.createElement(Box, { marginTop: 2 },
                        React.createElement(CopyClipboard, { value: value }, ({ isCopied, copyToClipboard }) => (React.createElement(TextButton, { prefixIcon: React.createElement(DuplicateSmall, null), size: "small", onClick: () => copyToClipboard(), dataHook: "request-id-copy-button" }, isCopied ? messages?.copiedSuccess : messages?.cta)))))))));
};
//# sourceMappingURL=RequestId.js.map