import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Selector',
    component: 'x-selector',
    subcomponents: ['x-selector-item', 'x-selector-tag'],
};
const Template = new Builder(args => `<x-selector ${toProps(args)}>
	<x-selector-item>Selection option 1</x-selector-item>
	<x-selector-item>Selection option 2</x-selector-item>
	<x-selector-item>Selection option 3</x-selector-item>
</x-selector>`);
export const Simple = Template.args({
    name: 'simple',
}).build(args => `<x-selector ${toProps(args)}>
	<x-selector-item icon="webhook" value="X1" selected>First option</x-selector-item>
	<x-selector-item icon="receipt-approved" value="X2"><h4>Second Option</h4> <h6>with description</h6></x-selector-item>
	<x-selector-item icon="open-box" value="X3">Last Option</x-selector-item>
</x-selector>`);
export const Multiple = Template.args({
    name: 'multiple',
    multiple: true,
}).build(args => `<x-selector ${toProps(args)}>
	<x-selector-item icon="webhook" value="X1">First option</x-selector-item>
	<x-selector-item icon="receipt-approved" value="X2">Second Option <small>with description</small></x-selector-item>
	<x-selector-item disabled icon="open-box" value="X3">Last Option <small>disabled</small></x-selector-item>
</x-selector>`);
export const WithImages = Template.args({
    name: 'images',
}).build(args => `<x-selector ${toProps(args)}>
	<x-selector-item image="a.png" value="X1">First option</x-selector-item>
	<x-selector-item image="b.png" value="X2">Second Option</x-selector-item>
	<x-selector-item image="c.png" value="X3">Last Option with large</x-selector-item>
</x-selector>`);
export const WithIcons = Template.args({}).build(args => `<x-selector ${toProps(args)}>
	<x-selector-item value="X1">
		First option
		<x-icon name="webhook"></x-icon>
	</x-selector-item>
	<x-selector-item value="X2">
		Second Option
		<x-icon name="tags"></x-icon>
	</x-selector-item>
	<x-selector-item value="X3">
		Last Option with large
		<x-icon name="activity"></x-icon>
	</x-selector-item>
</x-selector>`);
export const WithFlags = Template.args({}).build(args => `<x-selector ${toProps(args)}>
	<x-selector-item value="X1">
		Honduras
		<x-flag code="HN"></x-flag>
	</x-selector-item>
	<x-selector-item value="X2">
		Panama
		<x-flag code="PA"></x-flag>
	</x-selector-item>
	<x-selector-item value="X3">
		Guatemala
		<x-flag code="GT"></x-flag>
	</x-selector-item>
</x-selector>`);
export const WithActions = Template.args({}).build(args => `<x-selector ${toProps(args)}>
	<x-selector-item value="X1" block>
		First option
		<div slot="actions">
			<x-icon name="edit" size="1.5rem"></x-icon>
			<x-icon name="trash" color="red" size="1.5rem"></x-icon>
		</div>
	</x-selector-item>
	<x-selector-item value="X2" block>
		Second Option
		<div slot="actions">
			<x-icon name="edit" size="1.5rem"></x-icon>
			<x-icon name="trash" color="red" size="1.5rem"></x-icon>
		</div>
	</x-selector-item>
	<x-selector-item value="X3" image="card-1.jpeg" block>
		Last Option with large
		<div slot="actions">
			<x-input label="Amount" type="amount"></x-input>

			<x-icon name="edit" size="1.5rem"></x-icon>
			<x-icon name="trash" color="red" size="1.5rem"></x-icon>
		</div>
	</x-selector-item>
</x-selector>`);
export const TagType = Template.args({}).build(args => `<x-divider class="mb-2">Simple value</x-divider>
<x-selector ${toProps(args)}>
	<x-selector-tag value="X1">First option</x-selector-tag>
	<x-selector-tag value="X2">Second Option</x-selector-tag>
	<x-selector-tag value="X3">Last Option</x-selector-tag>
</x-selector>

<x-divider class="mt-4 mb-2">Multiple value</x-divider>
<x-selector multiple ${toProps(args)}>
	<x-selector-tag value="X1">First option</x-selector-tag>
	<x-selector-tag value="X2">Second Option</x-selector-tag>
	<x-selector-tag value="X3">Last Option</x-selector-tag>
</x-selector>`);
export const CardExamples = Template.args({}).build(() => `<div style="display: block">
	<x-divider>Select tokenized card</x-divider><br>

	<x-selector>
		<x-selector-item image="card-1.jpeg" name="test" value="visa" skew>
			<x-logo class="mb-1" name="visa"></x-logo>
			<h4>&bull;&bull;&bull;&bull; 4368</h4>
		</x-selector-item>
		<x-selector-item image="card-2.jpeg" name="test" value="mastercard" skew>
			<x-logo class="mb-1" name="mastercard"></x-logo>
			<h4>&bull;&bull;&bull;&bull; 9530</h4>
		</x-selector-item>
		<x-selector-item image="card-3.jpeg" name="test" value="banrural" skew>
			<x-logo class="mb-1" name="banrural"></x-logo>
			<h4>&bull;&bull;&bull;&bull; 1682</h4>
		</x-selector-item>
	</x-selector>


	<x-divider>With icons</x-divider><br>

	<x-selector>
		<x-selector-item name="test" value="visa">
			**** 4368
			<small>Débito</small>
			<x-icon name="card-visa"></x-icon>
		</x-selector-item>
		<x-selector-item name="test" value="mastercard">
			**** 9530
			<small>Crédito</small>
			<x-icon name="card-mastercard"></x-icon>
		</x-selector-item>
		<x-selector-item name="test" value="banrural">
			**** 1682
			<small>Crédito</small>
			<x-icon name="card-banrural"></x-icon>
		</x-selector-item>
	</x-selector>

	<x-divider>With images</x-divider><br>

	<x-selector>
		<x-selector-item image="visa.svg" name="test" value="visa">**** 4368 <small>Débito</small></x-selector-item>
		<x-selector-item image="mastercard.svg" name="test" value="mastercard">**** 9530 <small>Crédito</small></x-selector-item>
		<x-selector-item image="banrural.svg" name="test" value="banrural">**** 1682 <small>Crédito</small></x-selector-item>
	</x-selector>

	<x-divider>With chip mixed</x-divider><br>

	<x-selector>
		<x-selector-item image="chip.svg" name="test" value="visa">
			<small>VISA</small>
			&bull;&bull;&bull;&bull; 4368
		</x-selector-item>
		<x-selector-item image="chip.svg" name="test" value="mastercard">
			<small>MASTERCARD</small>
			&bull;&bull;&bull;&bull; 9530
		</x-selector-item>
		<x-selector-item image="chip.svg" name="test" value="banrural">
			<small>BANRURAL</small>
			&bull;&bull;&bull;&bull; 1682
		</x-selector-item>
	</x-selector>
</div>`);
