import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { ReactFlowProvider, ReactFlow } from '@xyflow/react';
import { ApplicationNode } from './application-node.js';
const nodeTypes = { applicationNode: ApplicationNode };
function ApplicationNodeCanvas({ data, style = { width: 550, height: 350 }, }) {
    const nodes = useMemo(() => [{ id: 'node-1', type: 'applicationNode', position: { x: 0, y: 0 }, data }], [data]);
    return (_jsx("div", { style: style, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
}
const meta = {
    title: 'Composed/ApplicationNode',
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    args: {
        id: 'app-1',
        name: 'Dashboard App',
        description: 'Main web dashboard for analytics',
        status: 'Idle',
        repositoryPath: '/home/user/dashboard-app',
        additionalPathCount: 0,
    },
};
export default meta;
export const Default = {
    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
};
export const Active = {
    args: {
        status: 'Active',
    },
    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
};
export const Error = {
    args: {
        status: 'Error',
    },
    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
};
export const WithDeleteButton = {
    args: {
        id: 'app-abc-123',
    },
    argTypes: {
        onDelete: { action: 'onDelete' },
    },
    render: (args) => _jsx(ApplicationNodeCanvas, { data: args, style: { width: 600, height: 350 } }),
};
/**
 * **WithCreateSddFeature** — application node with the "+ New" action
 * wired. The button sits in the card header (mirroring the repository
 * node's "+ New" affordance); clicking it invokes `onCreateSddFeature`
 * with this app's id, which the canvas owner uses to push to
 * `/create?applicationId=<id>` and open the create drawer scoped to
 * this application.
 */
export const WithCreateSddFeature = {
    args: {
        id: 'app-abc-123',
        name: 'Dashboard App',
    },
    argTypes: {
        onCreateSddFeature: { action: 'onCreateSddFeature' },
    },
    render: (args) => _jsx(ApplicationNodeCanvas, { data: args, style: { width: 600, height: 350 } }),
};
export const LongName = {
    args: {
        name: 'A Very Long Application Name That Should Truncate Nicely In The Card Header',
    },
    render: (args) => _jsx(ApplicationNodeCanvas, { data: args }),
};
const multipleApps = [
    {
        id: 'app-1',
        name: 'Dashboard App',
        description: 'Main web dashboard for analytics',
        status: 'Active',
        repositoryPath: '/home/user/dashboard-app',
        additionalPathCount: 0,
    },
    {
        id: 'app-2',
        name: 'Auth Service',
        description: 'Authentication microservice',
        status: 'Idle',
        repositoryPath: '/home/user/auth-service',
        additionalPathCount: 2,
    },
    {
        id: 'app-3',
        name: 'Payment Gateway',
        description: 'Payment processing service',
        status: 'Error',
        repositoryPath: '/home/user/payment-gateway',
        additionalPathCount: 0,
    },
    {
        id: 'app-4',
        name: 'Mobile API',
        description: 'REST API for mobile clients',
        status: 'Active',
        repositoryPath: '/home/user/mobile-api',
        additionalPathCount: 1,
    },
];
export const Multiple = {
    render: () => {
        const nodes = multipleApps.map((data, i) => ({
            id: `app-${i}`,
            type: 'applicationNode',
            position: { x: 0, y: i * 220 },
            data,
        }));
        return (_jsx("div", { style: { width: 600, height: 950 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
    },
};
