import ContextMenu from "./ContextMenu";
import { TextButton } from "../../buttons/TextButton/TextButton";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";

<Meta title="Menus/ContextMenu" component={ContextMenu} />

Basic:

<Canvas>
	<Story name="ContextMenu">
		<ContextMenu
			items={[
				{
					label: 'Open site',
					onClick: () => console.log('onClick Open a Site'),
				},
				{
					label: 'Admin dashboard',
					onClick: () => console.log('onClick Admin dashboard'),
				},
				{ type: 'separator' },
				{
					label: 'Reveal in Finder',
					onClick: () => console.log('onClick Reveal in Finder'),
					enabled: false,
				},
				{
					label: 'Site shell',
					onClick: () => console.log('onClick Site shell'),
					color: 'red',
				},
				{ type: 'separator' },
				{
					label: 'Restart',
					onClick: () => console.log('onClick Restart'),
				},
				{
					enabled: false,
					color: 'red',
					label: 'Stop',
					onClick: () => console.log('onClick Stop'),
				},
				{
					label: 'Start',
					onClick: () => console.log('onClick Start'),
				},
				{ type: 'separator' },
				{
					label: 'Clone site',
					onClick: () => console.log('onClick Clone site'),
				},
				{
					label: 'Export',
					onClick: () => console.log('onClick Export'),
				},
				{
					label: 'Save as Blueprint',
					onClick: () => console.log('onClick Blueprint'),
				},
				{ type: 'separator' },
				{
					label: 'Move to Group',
					submenu: [
						{
							label: 'Site group 1',
							type: 'checkbox',
							onClick: () => console.log('onClick Site group 1'),
						},
						{
							label: 'Site group 2',
							type: 'checkbox',
							checked: true,
							onClick: () => console.log('onClick Site group 2'),
						},
						{ type: 'separator' },
						{
							label: 'Create a Group',
							onClick: () => console.log('onClick Create a Group'),
						},
						{
					label: 'Move to Group',
					submenu: [
						{
							label: 'Site group 1',
							type: 'checkbox',
							onClick: () => console.log('onClick Site group 1'),
						},
						{
							label: 'Site group 2',
							type: 'checkbox',
							checked: true,
							onClick: () => console.log('onClick Site group 2'),
						},
						{ type: 'separator' },
						{
							label: 'Create a Group',
							onClick: () => console.log('onClick Create a Group'),
						},
					],
				},
					],
				},
				{ type: 'separator' },
				{
					label: 'Change domain',
					onClick: () => console.log('onClick Change Domain'),
				},
				{
					label: 'Rename',
					onClick: () => console.log('onClick Rename'),
				},
				{ type: 'separator' },
				{
					label: 'Delete',
					onClick: () => console.log('onClick Delete'),
				},
				{
					label: 'Move to Group',
					submenu: [
						{
							label: 'Site group 1',
							type: 'checkbox',
							onClick: () => console.log('onClick Site group 1'),
						},
						{
							label: 'Site group 2',
							type: 'checkbox',
							checked: true,
							onClick: () => console.log('onClick Site group 2'),
						},
						{ type: 'separator' },
						{
							label: 'Create a Group',
							onClick: () => console.log('onClick Create a Group'),
						},
					],
				},
				{},
				{},
			]}
		/>
	</Story>
</Canvas>