import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Select',
    component: 'x-select',
    subcomponents: ['x-select-option', 'x-select-group'],
};
const Template = new Builder(args => `<x-select ${toProps(args)}>
	<option>Selection option 1</option>
	<option>Selection option 2</option>
	<option>Selection option 3</option>
</x-select>`);
export const Simple = Template.args({
    placeholder: 'Select an option',
}).build();
export const Multiple = Template.args({
    label: 'Select an option',
    multiple: true,
    size: 3,
}).build();
export const WithLabel = Template.args({
    label: 'Description',
    placeholder: 'Select an option',
}).build();
export const WithIndicator = Template.args({
    placeholder: 'Select an option',
}).build(args => `<x-select ${toProps(args)}>
	<span slot="indicator">@</span>
	<option>Selection option 1</option>
	<option>Selection option 2</option>
	<option>Selection option 3</option>
</x-select>`);
export const WithValidation = Template.args({
    label: 'Is required',
    placeholder: 'Select an option',
    name: 'select',
    validate: true,
    required: true,
}).build(args => `<form>
	<x-select ${toProps(args)}>
		<option>Selection option 1</option>
		<option>Selection option 2</option>
		<option>Selection option 3</option>
	</x-select>
	<x-input-error errors-for="${args.name}"></x-input-error>
</form>`);
export const Loading = Template.args({
    loading: true,
    placeholder: 'Select an option',
}).build();
export const Disabled = Template.args({
    disabled: true,
    placeholder: 'Select an option',
}).build();
export const Custom = Template.args({
    placeholder: 'Select an option',
    label: 'Country',
    // multiple: true,
}).build(args => `<x-select ${toProps(args)}>
	<span slot="indicator">@</span>
	<x-select-group label="Centro America">
		<x-select-option value="GT">
			<x-flag class="mr-2" slot="left" code="GT"></x-flag>
			Guatemala
			<small slot="description">This is a small description of a option</small>
		</x-select-option>
		<x-select-option value="HN" selected>
			<x-flag class="mr-2" slot="left" code="HN"></x-flag>
			Honduras
			<small slot="description">This is a small description of a option</small>
		</x-select-option>
		<x-select-option value="CR">
			<x-flag class="mr-2" slot="left" code="CR"></x-flag>
			Costa Rica
			<small slot="description">This is a small description of a option</small>
		</x-select-option>
	</x-select-group>

	<x-select-group label="Norte America">
		<x-select-option value="CA">
			<x-flag class="mr-2" slot="left" code="CA"></x-flag>
			Canada
			<small slot="description">This is a small description of a option</small>
		</x-select-option>
		<x-select-option value="US" disabled>
			<x-flag class="mr-2" slot="left" code="US"></x-flag>
			Estados Unidos
			<small slot="description">This is a small description of a option</small>
		</x-select-option>
		<x-select-option value="MX">
			<x-flag class="mr-2" slot="left" code="MX"></x-flag>
			Mexico
			<small slot="description">This is a small description of a option</small>
		</x-select-option>
	</x-select-group>
</x-select>`);
