import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Button, StandardTree, Tree, treeHelpers, createUID, themeDefinition } from '@pega/cosmos-react-core';
import { themeToTree } from './Tree.mocks';
import { StyledBaseTree } from './Tree.styles';
export default {
    title: 'Core/Tree',
    component: Tree
};
export const BaseTree = () => {
    return (<StyledBaseTree nodes={themeToTree(themeDefinition)} nodeRenderer={({ id, subTree }) => {
            return (<>
            <span>{id}</span>
            {subTree}
          </>);
        }}/>);
};
export const StandardTreeDemo = (args) => {
    const [currentNodeId, setCurrentNodeId] = useState();
    const getMockNodes = ({ length = 5, parent = true } = {}) => {
        return Array.from({ length }, (_, i) => {
            const isParent = parent && i !== 2;
            const id = createUID();
            return {
                id,
                label: isParent ? 'Parent' : 'Leaf',
                icon: isParent ? 'folder-solid' : 'document-solid',
                secondary: 'This is secondary text',
                nodes: isParent ? [] : undefined,
                actions: [
                    { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },
                    { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }
                ],
                onClick: isParent
                    ? undefined
                    : nodeId => {
                        action(`Action for node: ${nodeId}`)();
                    },
                href: !args.selectableParents && isParent ? undefined : `#${id}`
            };
        });
    };
    const [allNodes, setAllNodes] = useState(() => {
        return getMockNodes({ length: 10 });
    });
    const loadChildNodes = (id) => {
        setTimeout(() => {
            setAllNodes(tree => {
                return treeHelpers.mapNode(tree, id, node => {
                    return {
                        ...node,
                        loading: false,
                        nodes: [...(node.nodes ?? []), ...getMockNodes()]
                    };
                });
            });
        }, 1000);
    };
    const expandTo = (id) => {
        setAllNodes(tree => {
            return treeHelpers.expandTo(tree, id);
        });
    };
    return (<>
      <StandardTree lined={args.lined} currentNodeId={currentNodeId} nodes={allNodes} onNodeClick={(id, e) => {
            e.preventDefault();
            setCurrentNodeId(id);
        }} onNodeToggle={id => {
            const clickedNode = treeHelpers.getNode(allNodes, id);
            if (!clickedNode?.nodes)
                return;
            setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
                return {
                    ...node,
                    expanded: !node.expanded,
                    loading: node.nodes?.length === 0
                };
            }));
            if (clickedNode?.nodes?.length > 0)
                return;
            loadChildNodes(id);
        }} selectableParents={args.selectableParents}/>
      <Button onClick={() => expandTo('')}>Collapse All</Button>
      <Button onClick={() => expandTo(currentNodeId || '')}>Expand to active item</Button>
    </>);
};
StandardTreeDemo.args = {
    lined: false,
    selectableParents: true
};
StandardTreeDemo.argTypes = {
    lined: { control: { type: 'boolean' } },
    selectableParents: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Tree.stories.jsx.map