import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Dialog, DialogTrigger, Tooltip, Button, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, Accordion, makeStyles, tokens, AccordionItem, AccordionHeader, Body1Strong, PresenceBadge, AccordionPanel, Card, CardHeader, Caption1, Body1, CardPreview, Persona, AvatarGroup, AvatarGroupItem, CardFooter, Spinner, Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-components';
import { useState, useEffect, memo, useMemo, useCallback } from 'react';
import { S as ShellServiceIdentity, u as useExtensionManager, L as Link } from './index--oJsOVVX.js';
import { AppsAddInRegular, DismissRegular, LinkRegular, BranchForkRegular, BugRegular, ArrowDownloadRegular, DeleteRegular, MailRegular, PeopleCommunityRegular } from '@fluentui/react-icons';
import { Fade } from '@fluentui/react-motion-components-preview';
import { Logger } from '@babylonjs/core/Misc/logger.js';
import '@babylonjs/core/Maths/math.color.js';
import '@babylonjs/core/Maths/math.vector.js';
import '@babylonjs/core/Misc/observable.js';
import '@babylonjs/core/Misc/typeStore.js';
import '@babylonjs/core/Misc/dataStorage.js';
import '@babylonjs/core/Misc/asyncLock.js';
import '@babylonjs/core/Misc/deferred.js';
import '@fluentui-contrib/react-resize-handle';
import '@fluentui-contrib/react-virtualizer';
import '@babylonjs/core/Misc/uniqueIdGenerator.js';
import '@babylonjs/addons/msdfText/fontAsset.js';
import '@babylonjs/addons/msdfText/textRenderer.js';
import '@babylonjs/core/Debug/physicsViewer.js';
import '@babylonjs/core/Materials/Textures/texture.js';
import '@babylonjs/core/Materials/materialFlags.js';
import '@babylonjs/core/Materials/standardMaterial.js';
import '@babylonjs/core/Meshes/Builders/groundBuilder.js';
import '@babylonjs/core/Misc/tools.js';
import '@babylonjs/core/Rendering/utilityLayerRenderer.js';
import '@babylonjs/materials/grid/gridMaterial.js';
import '@babylonjs/core/Instrumentation/engineInstrumentation.js';
import '@babylonjs/core/Instrumentation/sceneInstrumentation.js';
import '@babylonjs/core/Engines/AbstractEngine/abstractEngine.timeQuery.js';
import '@babylonjs/core/Engines/Extensions/engine.query.js';
import '@babylonjs/core/Engines/WebGPU/Extensions/engine.query.js';
import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollectionStrategies.js';
import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension.js';
import '@babylonjs/core/Misc/pressureObserverWrapper.js';
import '@babylonjs/core/Maths/math.scalar.js';
import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector.js';
import '@babylonjs/core/Maths/math.scalar.functions.js';
import '@babylonjs/core/Engines/abstractEngine.js';
import '@babylonjs/core/Bones/bone.js';
import '@babylonjs/core/Cameras/camera.js';
import '@babylonjs/core/FrameGraph/frameGraphUtils.js';
import '@babylonjs/core/Gizmos/cameraGizmo.js';
import '@babylonjs/core/Gizmos/gizmoManager.js';
import '@babylonjs/core/Gizmos/lightGizmo.js';
import '@babylonjs/core/Gizmos/spatialAudioGizmo.js';
import '@babylonjs/core/Lights/light.js';
import '@babylonjs/core/Meshes/abstractMesh.js';
import '@babylonjs/core/node.js';
import 'react-dom/client';
import '@babylonjs/core/Misc/screenshotTools.js';
import '@babylonjs/core/Layers/selectionOutlineLayer.js';
import '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
import '@babylonjs/core/Animations/animationGroup.js';
import '@babylonjs/core/Animations/animation.js';
import '@babylonjs/core/Animations/animationPropertiesOverride.js';
import '@babylonjs/core/Audio/sound.js';
import '@babylonjs/core/AudioV2/abstractAudio/abstractAudioBus.js';
import '@babylonjs/core/AudioV2/abstractAudio/abstractSound.js';
import '@babylonjs/core/AudioV2/abstractAudio/abstractSoundSource.js';
import '@babylonjs/core/AudioV2/abstractAudio/audioBus.js';
import '@babylonjs/core/AudioV2/abstractAudio/audioEngineV2.js';
import '@babylonjs/core/AudioV2/abstractAudio/staticSound.js';
import '@babylonjs/core/AudioV2/abstractAudio/streamingSound.js';
import '@babylonjs/core/Cameras/arcRotateCamera.js';
import '@babylonjs/core/Cameras/followCamera.js';
import '@babylonjs/core/Cameras/freeCamera.js';
import '@babylonjs/core/Cameras/geospatialCamera.js';
import '@babylonjs/core/Cameras/targetCamera.js';
import '@babylonjs/core/scene.js';
import '@babylonjs/core/FrameGraph/frameGraph.js';
import '@babylonjs/core/Lights/Clustered/clusteredLightContainer.js';
import '@babylonjs/core/Lights/directionalLight.js';
import '@babylonjs/core/Lights/hemisphericLight.js';
import '@babylonjs/core/Lights/pointLight.js';
import '@babylonjs/core/Lights/rectAreaLight.js';
import '@babylonjs/core/Lights/shadowLight.js';
import '@babylonjs/core/Lights/spotLight.js';
import '@babylonjs/core/Lights/Shadows/cascadedShadowGenerator.js';
import '@babylonjs/core/Debug/directionalLightFrustumViewer.js';
import '@babylonjs/core/Materials/Textures/cubeTexture.js';
import '@babylonjs/core/Misc/fileTools.js';
import '@babylonjs/core/Lights/Shadows/shadowGenerator.js';
import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent.js';
import '@babylonjs/core/Materials/material.js';
import '@babylonjs/core/Materials/multiMaterial.js';
import '@babylonjs/core/Materials/Node/nodeMaterial.js';
import '@babylonjs/core/Materials/PBR/openpbrMaterial.js';
import '@babylonjs/core/Materials/PBR/pbrBaseMaterial.js';
import '@babylonjs/materials/sky/skyMaterial.js';
import '@babylonjs/core/Engines/constants.js';
import '@babylonjs/core/Engines/engine.js';
import '@babylonjs/core/Particles/particleSystem.js';
import '@babylonjs/core/Materials/PBR/pbrMaterial.js';
import '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
import '@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes.js';
import '@babylonjs/core/Misc/gradients.js';
import '@babylonjs/core/Meshes/mesh.js';
import '@babylonjs/core/Debug/skeletonViewer.js';
import '@babylonjs/core/Meshes/buffer.js';
import '@babylonjs/core/Meshes/Builders/linesBuilder.js';
import '@babylonjs/core/Meshes/instancedMesh.js';
import '@babylonjs/core/Rendering/renderingManager.js';
import '@babylonjs/core/Rendering/edgesRenderer.js';
import '@babylonjs/core/Rendering/outlineRenderer.js';
import '@babylonjs/core/Particles/gpuParticleSystem.js';
import '@babylonjs/core/Particles/Node/nodeParticleSystemSet.helper.js';
import '@babylonjs/core/Particles/particleHelper.js';
import '@babylonjs/core/Particles/EmitterTypes/boxParticleEmitter.js';
import '@babylonjs/core/Particles/EmitterTypes/coneParticleEmitter.js';
import '@babylonjs/core/Particles/EmitterTypes/cylinderParticleEmitter.js';
import '@babylonjs/core/Particles/EmitterTypes/hemisphericParticleEmitter.js';
import '@babylonjs/core/Particles/EmitterTypes/meshParticleEmitter.js';
import '@babylonjs/core/Particles/EmitterTypes/pointParticleEmitter.js';
import '@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter.js';
import '@babylonjs/core/Particles/attractor.js';
import '@babylonjs/core/Meshes/Builders/sphereBuilder.js';
import '@babylonjs/core/Particles/Node/Blocks/particleInputBlock.js';
import '@babylonjs/core/Particles/Node/Blocks/Update/updateAttractorBlock.js';
import '@babylonjs/core/Particles/Node/Enums/nodeParticleBlockConnectionPointTypes.js';
import '@babylonjs/core/Meshes/transformNode.js';
import '@babylonjs/core/Physics/v2/IPhysicsEnginePlugin.js';
import '@babylonjs/core/Physics/v2/physicsEngineComponent.js';
import '@babylonjs/core/PostProcesses/postProcess.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipeline.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssrRenderingPipeline.js';
import '@babylonjs/core/Rendering/IBLShadows/iblShadowsRenderPipeline.js';
import '@babylonjs/core/Materials/imageProcessingConfiguration.js';
import '@babylonjs/core/Bones/skeleton.js';
import '@babylonjs/core/Sprites/sprite.js';
import '@babylonjs/core/Sprites/spriteManager.js';
import '@babylonjs/core/Misc/textureTools.js';
import '@babylonjs/core/Events/keyboardEvents.js';
import '@babylonjs/core/Events/pointerEvents.js';
import '@babylonjs/core/Materials/Textures/htmlElementTexture.js';
import '@babylonjs/core/Materials/shaderMaterial.js';
import '@babylonjs/core/Meshes/Builders/planeBuilder.js';
import '@babylonjs/core/Materials/Textures/baseTexture.js';
import '@babylonjs/core/Materials/Textures/envCubeTexture.js';
import '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
import '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
import '@babylonjs/core/Materials/Textures/thinTexture.js';
import '@babylonjs/core/AudioV2/abstractAudio/mainAudioBus.js';
import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
import '@babylonjs/core/Sprites/spriteSceneComponent.js';
import '@babylonjs/core/Materials/Textures/dynamicTexture.js';
import '@babylonjs/core/Misc/equirectangularCapture.js';
import '@babylonjs/core/Misc/sceneRecorder.js';
import '@babylonjs/core/Misc/videoRecorder.js';
import '@babylonjs/core/Misc/sceneSerializer.js';
import '@babylonjs/core/Misc/environmentTextureTools.js';
import '@babylonjs/core/SmartAssets/smartAssetManager.js';
import '@babylonjs/core/Loading/Plugins/babylonFileLoader.js';
import '@babylonjs/core/SmartAssets/smartAssetSerializer.js';
import '@babylonjs/core/Loading/sceneLoader.js';
import '@babylonjs/core/Misc/filesInput.js';
import '@babylonjs/loaders/glTF/2.0/glTFLoaderExtensionRegistry.js';
import '@babylonjs/loaders/glTF/glTFFileLoader.js';
import '@babylonjs/loaders/glTF/glTFValidation.js';
import '@babylonjs/core/Collisions/gpuPicker.js';
import '@babylonjs/core/Engines/engineStore.js';
import '@babylonjs/core/Debug/debugLayer.js';
import '@babylonjs/core/Misc/lazy.js';

const useStyles = makeStyles({
    extensionButton: {},
    extensionsDialogSurface: {
        height: "auto",
        width: "70vw",
        maxWidth: "600px",
        maxHeight: "70vh",
        backgroundColor: tokens.colorNeutralBackground2,
    },
    extensionDialogBody: {
        maxWidth: "100%",
        maxHeight: "100%",
    },
    extensionDialogContent: {
        marginLeft: `calc(-1 * ${tokens.spacingHorizontalM})`,
        marginRight: `calc(-1 * ${tokens.spacingHorizontalS})`,
    },
    extensionHeader: {},
    extensionItem: {},
    extensionCardPreview: {
        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
        display: "flex",
        flexDirection: "column",
        rowGap: tokens.spacingVerticalL,
    },
    extensionIntro: {
        display: "flex",
        alignItems: "center",
        columnGap: tokens.spacingHorizontalM,
    },
    extensionDescription: {
        display: "flex",
        flexDirection: "row",
        columnGap: tokens.spacingHorizontalS,
    },
    extensionButtonContainer: {
        marginLeft: "auto",
        alignSelf: "flex-start",
    },
    spinner: {
        animationDuration: "1s",
        animationName: {
            from: { opacity: 0 },
            to: { opacity: 1 },
        },
    },
    webResourceDiv: {
        display: "flex",
        flexDirection: "column",
    },
    webResourceLink: {
        display: "flex",
        flexDirection: "row",
        columnGap: tokens.spacingHorizontalS,
        alignItems: "center",
    },
    personPopoverSurfaceDiv: {
        display: "flex",
        flexDirection: "column",
        rowGap: tokens.spacingVerticalS,
    },
    accordionHeaderDiv: {
        display: "flex",
        flexDirection: "row",
        columnGap: tokens.spacingHorizontalS,
        alignItems: "center",
    },
    resourceDetailsDiv: {
        display: "flex",
        flexDirection: "column",
        rowGap: tokens.spacingVerticalS,
    },
    peopleDetailsDiv: {
        display: "flex",
        flexDirection: "row",
        columnGap: tokens.spacingHorizontalXL,
    },
    avatarGroupItem: {
        cursor: "pointer",
    },
});
function AsPersonMetadata(person) {
    if (typeof person === "string") {
        return { name: person };
    }
    return person;
}
function GetAvatarImage(person) {
    return person.avatar ? { src: `data:image/png;base64,${person.avatar}` } : undefined;
}
function usePeopleMetadata(people) {
    const definedPeople = useMemo(() => (people ? people.filter((person) => !!person) : []), [people]);
    return useMemo(() => definedPeople.map(AsPersonMetadata), [definedPeople]);
}
const WebResource = (props) => {
    const { url, urlDisplay, icon, label } = props;
    const classes = useStyles();
    return (jsx("div", { className: classes.webResourceDiv, children: jsx(Tooltip, { content: label, relationship: "label", positioning: "before", withArrow: true, children: jsxs("div", { className: classes.webResourceLink, children: [icon, jsx(Link, { url: url, value: urlDisplay || url })] }) }) }));
};
const PersonDetailsPopover = (props) => {
    const { person, title, disabled, children } = props;
    const classes = useStyles();
    if (disabled) {
        return jsx(Fragment, { children: children });
    }
    return (jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: children }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.personPopoverSurfaceDiv, children: [jsx(Persona, { name: person.name, secondaryText: title, avatar: { image: GetAvatarImage(person) } }), person.email && jsx(WebResource, { url: `mailto:${person.email}`, urlDisplay: person.email, icon: jsx(MailRegular, {}), label: "Email" }), person.url && jsx(WebResource, { url: person.url, urlDisplay: person.url, icon: jsx(LinkRegular, {}), label: "Website" }), person.forumUserName && (jsx(WebResource, { url: `https://forum.babylonjs.com/u/${person.forumUserName}`, urlDisplay: person.forumUserName, icon: jsx(PeopleCommunityRegular, {}), label: "Forum" }))] }) })] }));
};
const ExtensionDetails = memo((props) => {
    const { extension } = props;
    const { metadata } = extension;
    const classes = useStyles();
    const [canInstall, setCanInstall] = useState(false);
    const [canUninstall, setCanUninstall] = useState(false);
    const [isStateChanging, setIsStateChanging] = useState(false);
    useEffect(() => {
        const updateState = () => {
            setCanInstall(!extension.isInstalled && !extension.isStateChanging);
            setCanUninstall(extension.isInstalled && !extension.isStateChanging);
            setIsStateChanging(extension.isStateChanging);
        };
        const stateChangedHandlerRegistration = extension.addStateChangedHandler(updateState);
        updateState();
        return stateChangedHandlerRegistration.dispose;
    }, [extension]);
    const [author] = usePeopleMetadata(useMemo(() => [metadata.author], [metadata.author]));
    const contributors = usePeopleMetadata(metadata.contributors);
    const hasResourceDetails = metadata.homepage || metadata.repository || metadata.bugs;
    const hasPeopleDetails = author || contributors.length > 0;
    const hasPreviewDetails = hasResourceDetails || hasPeopleDetails;
    const hasAuthorDetails = author?.email || author?.url || author?.forumUserName;
    const subHeader = [metadata.version ? `${metadata.version}` : null, metadata.license ? `${metadata.license}` : null].filter(Boolean).join(" | ");
    const install = useCallback(async () => {
        try {
            await extension.installAsync();
        }
        catch {
            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.
        }
    }, [extension]);
    const uninstall = useCallback(async () => {
        try {
            await extension.uninstallAsync();
        }
        catch {
            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.
        }
    }, [extension]);
    return (jsxs(AccordionItem, { className: classes.extensionItem, value: extension.metadata.name, children: [jsx(AccordionHeader, { className: classes.extensionHeader, expandIconPosition: "end", children: jsxs("div", { className: classes.accordionHeaderDiv, children: [jsx(Body1Strong, { children: extension.metadata.name }), jsx(Fade, { visible: extension.isInstalled, children: jsx(PresenceBadge, { size: "small" }) })] }) }), jsx(AccordionPanel, { children: jsxs(Card, { children: [jsx(CardHeader, { header: jsx(Body1, { children: metadata.description }), description: jsx(Caption1, { italic: true, children: subHeader }) }), hasPreviewDetails && (jsxs(CardPreview, { className: classes.extensionCardPreview, children: [hasResourceDetails && (jsxs("div", { className: classes.resourceDetailsDiv, style: { display: "flex" }, children: [metadata.homepage && jsx(WebResource, { url: metadata.homepage, icon: jsx(LinkRegular, {}), label: "Website" }), metadata.repository && jsx(WebResource, { url: metadata.repository, icon: jsx(BranchForkRegular, {}), label: "Repository" }), metadata.bugs && jsx(WebResource, { url: metadata.bugs, icon: jsx(BugRegular, {}), label: "Report Issues" })] })), hasPeopleDetails && (jsxs("div", { className: classes.peopleDetailsDiv, style: { display: "flex" }, children: [author && (jsx(PersonDetailsPopover, { person: author, title: "Author", disabled: !hasAuthorDetails, children: jsx(Persona, { name: author.name, secondaryText: "Author", avatar: { image: GetAvatarImage(author) }, style: { cursor: hasAuthorDetails ? "pointer" : "default" } }) })), contributors.length > 0 && (jsx(AvatarGroup, { layout: "stack", children: contributors.map((contributor) => {
                                                return (jsx(PersonDetailsPopover, { person: contributor, title: "Contributor", children: jsx(AvatarGroupItem, { name: contributor.name, className: classes.avatarGroupItem, image: GetAvatarImage(contributor) }) }, contributor.name));
                                            }) }))] }))] })), jsxs(CardFooter, { children: [canInstall && (jsx(Button, { appearance: "primary", size: "small", icon: jsx(ArrowDownloadRegular, {}), onClick: install, children: "Get" })), canUninstall && (jsx(Button, { appearance: "secondary", size: "small", icon: jsx(DeleteRegular, {}), onClick: uninstall, children: "Remove" })), isStateChanging && jsx(Spinner, { className: classes.spinner, size: "extra-small" })] })] }) })] }));
});
const ExtensionListServiceDefinition = {
    friendlyName: "ExtensionList",
    consumes: [ShellServiceIdentity],
    factory: (shellService) => {
        const registration = shellService.addToolbarItem({
            key: "ExtensionList",
            horizontalLocation: "right",
            verticalLocation: "top",
            teachingMoment: {
                title: "Extensions",
                description: "Extensions provide new optional features that can be useful to your specific task or workflow. Click this button to manage extensions.",
            },
            order: -200,
            component: () => {
                const classes = useStyles();
                const [selectedTab, setSelectedTab] = useState("available");
                const extensionManager = useExtensionManager();
                const [extensions, setExtensions] = useState([]);
                useEffect(() => {
                    if (extensionManager) {
                        const populateExtensionsAsync = async () => {
                            const query = await extensionManager.queryExtensionsAsync(undefined, undefined, selectedTab === "installed");
                            const extensions = await query.getExtensionsAsync(0, query.totalCount);
                            setExtensions(extensions);
                        };
                        // eslint-disable-next-line github/no-then
                        populateExtensionsAsync().catch((error) => {
                            Logger.Warn(`Failed to populate extensions: ${error}`);
                        });
                    }
                }, [extensionManager, selectedTab]);
                return (jsxs(Dialog, { children: [jsx(DialogTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: "Manage Extensions", relationship: "label", children: jsx(Button, { className: classes.extensionButton, appearance: "subtle", icon: jsx(AppsAddInRegular, {}) }) }) }), jsx(DialogSurface, { className: classes.extensionsDialogSurface, children: jsxs(DialogBody, { className: classes.extensionDialogBody, children: [jsx(DialogTitle, { action: jsx(DialogTrigger, { action: "close", children: jsx(Button, { appearance: "subtle", "aria-label": "close", icon: jsx(DismissRegular, {}) }) }), children: jsxs(Fragment, { children: ["Extensions", jsxs(TabList, { className: classes.extensionDialogContent, selectedValue: selectedTab, onTabSelect: (event, data) => {
                                                        setSelectedTab(data.value);
                                                    }, children: [jsx(Tab, { value: "available", children: "Available" }), jsx(Tab, { value: "installed", children: "Installed" })] })] }) }), jsx(DialogContent, { className: classes.extensionDialogContent, children: jsx(Accordion, { collapsible: true, children: extensions.map((extension) => (jsx(ExtensionDetails, { extension: extension }, extension.metadata.name))) }) })] }) })] }));
            },
        });
        return {
            dispose: () => registration.dispose(),
        };
    },
};

export { ExtensionListServiceDefinition };
//# sourceMappingURL=extensionsListService-j6viqje8.js.map
