import { useState } from 'react';
import { Button, useElement } from '@pega/cosmos-react-core';
import { ItemLibrary } from '@pega/cosmos-react-build';
import { nodeLibrary } from './LibraryPicker.mocks';
export default {
    title: 'Build/LibraryPicker',
    component: ItemLibrary,
    parameters: {
        docs: {
            description: {
                component: 'Library picker is a picker component enhanced with search and grouping of case tasks.'
            }
        },
        controls: {
            disable: true
        }
    }
};
export const ItemPicker = () => {
    const [selectedItem, setSelectedItem] = useState();
    const [target, setTarget] = useElement(null);
    const btnClick = (e) => setTarget(e.currentTarget);
    const onSelect = (item) => {
        setSelectedItem(item);
    };
    return (<>
      {selectedItem ? <div>Selected: {selectedItem.primary}</div> : ''}
      <Button onClick={btnClick}>Select from library</Button>
      {target && (<ItemLibrary items={nodeLibrary} target={target} onClick={onSelect} onDismiss={() => setTarget(null)}/>)}
    </>);
};
//# sourceMappingURL=LibraryPicker.stories.jsx.map