import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Dock',
    component: 'x-dock',
};
const Template = new Builder(args => `<x-dock ${toProps(args)}>
	<x-dock-item>
		<x-icon name="home">
	</x-dock-item>
	<x-dock-item>
		<x-icon name="merchant"></x-icon>
	</x-dock-item>
	<x-dock-item>
		<x-icon name="cursor"></x-icon>
	</x-dock-item>
	<x-dock-item>
		<x-icon name="search"></x-icon>
	</x-dock-item>
</x-dock>`);
export const Simple = Template.args({}).build();
export const Block = Template.args({
    block: true,
}).build();
export const WithButtons = Template.args({
    block: true,
}).build(args => `<x-dock ${toProps(args)}>
	<x-button icon="back">Back</x-button>

	<x-dock-item>
		<x-icon name="light-mode"></x-icon>
	</x-dock-item>
	<x-dock-item>
		<x-icon name="dark-mode"></x-icon>
	</x-dock-item>

	<x-button icon="right">Continue</x-button>
</x-dock>`);
export const WithSwitcher = Template.args({}).build(args => `<x-divider>Simple</x-divider>
<x-dock ${toProps(args)}>
	<x-dock-switch>
		<x-dock-item>
			<x-icon name="home"></x-icon>
		</x-dock-item>
		<x-dock-item>
			<x-icon name="merchant"></x-icon>
		</x-dock-item>
		<x-dock-item>
			<x-icon name="cursor">
		</x-dock-item>
		<x-dock-item>
			<x-icon name="search"></x-icon>
		</x-dock-item>
	</x-dock-switch>
</x-dock>
<x-divider>With Text</x-divider>
<x-dock ${toProps(args)}>
	<x-dock-switch>
		<x-dock-item>
			<x-icon name="home"></x-icon>
			Home
		</x-dock-item>
		<x-dock-item>
			<x-icon name="merchant"></x-icon>
			Shop
		</x-dock-item>
		<x-dock-item>
			<x-icon name="cursor"></x-icon>
			Online
		</x-dock-item>
		<x-dock-item>
			<x-icon name="search"></x-icon>
			Search
		</x-dock-item>
	</x-dock-switch>
</x-dock>
<x-divider>With Labels</x-divider>
<x-dock ${toProps(args)}>
	<x-dock-switch direction="column">
		<x-dock-item label="Home">
			<x-icon name="home"></x-icon>
		</x-dock-item>
		<x-dock-item label="Shop">
			<x-icon name="merchant"></x-icon>
		</x-dock-item>
		<x-dock-item label="Online">
			<x-icon name="cursor"></x-icon>
		</x-dock-item>
		<x-dock-item label="Search">
			<x-icon name="search"></x-icon>
		</x-dock-item>
	</x-dock-switch>
</x-dock>
<x-divider>With Float Actions</x-divider>
<x-dock ${toProps(args)}>
	<x-dock-item>
		<x-icon name="back"></x-icon>
	</x-dock-item>
	<x-dock-switch direction="column">
		<x-dock-item label="Light">
			<x-icon name="light-mode"></x-icon>
		</x-dock-item>
		<x-dock-item label="Dark">
			<x-icon name="dark-mode"></x-icon>
		</x-dock-item>
	</x-dock-switch>
	<x-dock-item>
		<x-icon name="search"></x-icon>
	</x-dock-item>
</x-dock>
<x-divider>App</x-divider>
<x-dock block ${toProps(args)}>
	<x-dock-switch direction="column">
		<x-dock-item label="Inicio">
			<x-icon name="dashboard"></x-icon>
		</x-dock-item>
		<x-dock-item label="Cobros">
			<x-icon name="credit-card"></x-icon>
		</x-dock-item>
		<x-dock-item label="Tienda">
			<x-icon name="cursor"></x-icon>
		</x-dock-item>
	</x-dock-switch>
</x-dock>`);
