import React from 'react';
import { Delete, Edit, FolderMove, More } from '@wix/wix-ui-icons-common';
import NestableList from './NestableList';
import Text from '../Text';
import Box from '../Box';
import PopoverMenu from '../PopoverMenu';
import IconButton from '../IconButton';
export default {
    title: 'NestableList',
    component: NestableList,
};
const Template = args => (React.createElement(NestableList, { ...args }));
const TableListItemContent = ({ title, description, }) => (React.createElement(Box, { align: "space-between", verticalAlign: "middle" },
    React.createElement(Box, { marginLeft: "SP3", direction: "vertical" },
        React.createElement(Text, { weight: "normal" }, title),
        React.createElement(Text, { size: "small", secondary: true }, description)),
    React.createElement(PopoverMenu, { placement: "left", triggerElement: React.createElement(IconButton, { skin: "light" },
            React.createElement(More, null)) },
        React.createElement(PopoverMenu.MenuItem, { text: "Edit Category", prefixIcon: React.createElement(Edit, null) }),
        React.createElement(PopoverMenu.MenuItem, { text: "Move Category", prefixIcon: React.createElement(FolderMove, null) }),
        React.createElement(PopoverMenu.MenuItem, { text: "Delete Category", prefixIcon: React.createElement(Delete, null) }))));
const commonItemProps = {
    verticalPadding: 'tiny',
};
const commonProps = {
    items: [
        {
            ...commonItemProps,
            id: '1',
            options: [
                {
                    value: (React.createElement(TableListItemContent, { title: "Sports", description: "1 post \u00B7 60 views" })),
                },
            ],
            children: [
                {
                    ...commonItemProps,
                    id: '2',
                    options: [
                        {
                            value: (React.createElement(TableListItemContent, { title: "Equipment", description: "5 posts \u00B7 100 views" })),
                        },
                    ],
                },
                {
                    ...commonItemProps,
                    id: '3',
                    options: [
                        {
                            value: (React.createElement(TableListItemContent, { title: "Courts", description: "3 posts \u00B7 120 views" })),
                        },
                    ],
                },
            ],
        },
        {
            ...commonItemProps,
            id: '4',
            options: [
                {
                    value: (React.createElement(TableListItemContent, { title: "Tournaments", description: "15 posts \u00B7 160 views" })),
                },
            ],
        },
    ],
    onChange: () => { },
};
export const Basic = Template.bind({});
Basic.args = {
    ...commonProps,
};
//# sourceMappingURL=NestableList.story.js.map