import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CloudFilled } from '@ant-design/icons';
import { Button, Card, Dropdown, Typography } from 'antd';
import { useState } from 'react';
import { Box, Flex } from '../../grid';
import { useLivePreviewContext } from '../../hooks';
import { copyToClipboard } from '../../utils';
import { CopiableInput } from '../CopiableInput';
import { StatusIcon } from '../LivePreviewContext/LivePreviewBar';
import { StyledMenuButton } from './Menu';
export function RunOnCubeCloud() {
    const livePreviewContext = useLivePreviewContext();
    const [loading, setLoading] = useState(false);
    if (!livePreviewContext || livePreviewContext?.livePreviewDisabled) {
        return null;
    }
    const { active, status, uploading } = livePreviewContext.statusLivePreview;
    const button = (_jsxs(StyledMenuButton, { "data-testid": "live-preview-btn", onClick: () => {
            if (!active) {
                livePreviewContext.startLivePreview();
            }
        }, children: [active ? (_jsx(StatusIcon, { status: status, uploading: uploading })) : (_jsx(CloudFilled, {})), !active ? 'Run' : 'Running', " in Cloud"] }));
    if (!active) {
        return button;
    }
    return (_jsx(Dropdown, { overlay: _jsx(LivePreviewOverlay, { livePreviewStatus: livePreviewContext.statusLivePreview, apiUrl: livePreviewContext.credentials?.apiUrl || '', loading: loading, onStopClick: async () => {
                setLoading(true);
                await livePreviewContext.stopLivePreview();
                setLoading(false);
            } }), trigger: ['click'], children: button }));
}
function LivePreviewOverlay({ livePreviewStatus, apiUrl, loading, onStopClick, }) {
    const { url, deploymentId } = livePreviewStatus;
    return (_jsx(Card, { style: { maxWidth: 600 }, children: _jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Typography.Paragraph, { children: ["Playground uses the following API URL to execute queries on Cloud. You can use this API to test queries in your application.", ' ', _jsx(Typography.Link, { href: "https://cube.dev/docs/introduction", target: "_blank", children: "Learn more" }), ' ', "on developing and testing with Cube Cloud."] }), _jsx(CopiableInput, { value: apiUrl, onCopyClick: copyToClipboard }), _jsx(Box, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Button, { type: "primary", target: "_blank", href: `${url}/deployments/${deploymentId}/history`, children: "Inspect queries" }), _jsx(Button, { type: "primary", danger: true, loading: loading, onClick: onStopClick, children: "Stop" })] }) })] }) }));
}
//# sourceMappingURL=RunOnCubeCloud.js.map