import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Tabs',
    argTypes: {
        color: ColorsControl,
        icon: IconsControl,
        position: {
            options: ['left', 'centered', 'right'],
            control: {
                type: 'radio',
            },
        },
    },
};
export const Simple = new Builder(args => `<x-tabs ${toProps(args)}>
		<x-tab label="Pictures">
			Lorem ipsum dolor sit amet.
		</x-tab>

		<x-tab label="Music">
			Lorem <br>
			ipsum <br>
			dolor <br>
			sit <br>
			amet.
		</x-tab>

		<x-tab label="Books">
			What light is light, if Silvia be not seen?
			What joy is joy, if Silvia be not by— <br>
			Unless it be to think that she is by
			And feed upon the shadow of perfection? <br>
			Except I be by Silvia in the night,
			There is no music in the nightingale.
		</x-tab>

		<x-tab label="Videos">
			Nunc nec velit nec libero vestibulum eleifend.
			Curabitur pulvinar congue luctus.
			Nullam hendrerit iaculis augue vitae ornare.
			Maecenas vehicula pulvinar tellus, id sodales felis lobortis eget.
		</x-tab>
	</x-tabs>`)
    .args({})
    .build();
export const Disabled = new Builder(args => `<x-tabs ${toProps(args)}>
		<x-tab label="Chrome">
			Lorem ipsum dolor sit amet.
		</x-tab>
		<x-tab label="Explorer" active>
			Lorem <br>
			ipsum <br>
			dolor <br>
			sit <br>
			amet.
		</x-tab>
		<x-tab label="Edge" disabled>
			What light is light, if Silvia be not seen?
			What joy is joy, if Silvia be not by— <br>
			Unless it be to think that she is by
		</x-tab>

		<x-tab label="Firefox">
			Nunc nec velit nec libero vestibulum eleifend.
		</x-tab>
	</x-tabs>`)
    .args({})
    .build();
export const FullWidth = new Builder(args => `<x-tabs ${toProps(args)} >
		<x-tab label="Chrome" icon="browser-chrome">
			Lorem ipsum dolor sit amet.
		</x-tab>
		<x-tab label="Edge" icon="browser-edge">
			What light is light, if Silvia be not seen?
			What joy is joy, if Silvia be not by— <br>
			Unless it be to think that she is by
		</x-tab>
		<x-tab label="Firefox" icon="browser-firefox">
			Nunc nec velit nec libero vestibulum eleifend.
		</x-tab>
	</x-tabs>`)
    .args({
    block: true,
})
    .build();
export const WithIcons = new Builder(args => `<x-tabs ${toProps(args)}>
		<x-tab label="Chrome" icon="browser-chrome">
			Lorem ipsum dolor sit amet.
		</x-tab>
		<x-tab label="Edge" icon="browser-edge">
			What light is light, if Silvia be not seen?
			What joy is joy, if Silvia be not by— <br>
		</x-tab>
		<x-tab label="Firefox" icon="browser-firefox">
			Nunc nec velit nec libero vestibulum eleifend.
		</x-tab>
	</x-tabs>`)
    .args({})
    .build();
export const WithPositions = new Builder(args => `<x-tabs ${toProps(args)} >
		<x-tab label="Chrome" icon="browser-chrome">
			Lorem ipsum dolor sit amet.
		</x-tab>
		<x-tab label="Edge" icon="browser-edge">
			What light is light, if Silvia be not seen?
			What joy is joy, if Silvia be not by— <br>
			Unless it be to think that she is by
		</x-tab>
		<x-tab label="Firefox" icon="browser-firefox">
			Nunc nec velit nec libero vestibulum eleifend.
		</x-tab>
	</x-tabs>`)
    .args({
    position: 'centered',
})
    .build();
export const WithBadges = new Builder(args => `<x-tabs ${toProps(args)}>
		<x-tab label="Chrome" badge="12">
			Lorem ipsum dolor sit amet.
		</x-tab>
		<x-tab label="Edge" badge="1" >
			What light is light, if Silvia be not seen?
			What joy is joy, if Silvia be not by— <br>
			Unless it be to think that she is by
		</x-tab>
		<x-tab label="Firefox" badge="2">
			Nunc nec velit nec libero vestibulum eleifend.
		</x-tab>
	</x-tabs>`)
    .args({
    activeTab: 3,
})
    .build();
export const WithCard = new Builder(args => `<div style="max-width: 400px">
	<x-card icon="auth-capture" icon-color="teal">
		<template v-slot:footer>
			<span class="text-muted"><i class="icon-clock"></i> 6 minutes ago</span>
			<a href="javascript:;" class="card-link"><i class="icon-right"></i> Go to action</a>
		</template>

		<x-tabs ${toProps(args)}>
			<x-tab label="Pictures">
				Lorem ipsum dolor sit amet.
			</x-tab>

			<x-tab label="Music">
				Lorem <br>
				ipsum <br>
				dolor <br>
				sit <br>
				amet.
			</x-tab>

			<x-tab label="Books">
				What light is light, if Silvia be not seen?
				What joy is joy, if Silvia be not by— <br>
				Unless it be to think that she is by
				And feed upon the shadow of perfection? <br>
				Except I be by Silvia in the night,
				There is no music in the nightingale.
			</x-tab>

			<x-tab label="Videos">
				Nunc nec velit nec libero vestibulum eleifend.
				Curabitur pulvinar congue luctus.
				Nullam hendrerit iaculis augue vitae ornare.
				Maecenas vehicula pulvinar tellus, id sodales felis lobortis eget.
			</x-tab>
		</x-tabs>
	</x-card>
</div>`)
    .args({})
    .build();
