import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Input',
    component: 'x-input',
    subcomponents: ['x-input-error', 'x-input-suggestion', 'x-input-suggestion-item', 'x-input-radio', 'x-input-checkbox'],
};
const Template = new Builder(args => `<x-input ${toProps(args)}></x-input>`);
export const Simple = Template.args({
    placeholder: 'Enter a value'
}).build();
export const WithValidation = Template.args({
    label: 'Enter a email',
    type: 'email',
    name: 'email',
    validate: true,
    required: true,
}).build((args) => `<form>
	<x-input ${toProps(args)}></x-input>
	<x-input-error errors-for="${args.name}"></x-input-error>
</form>`);
export const WithAutoHideLabel = Template.args({
    label: 'Description',
}).build();
export const WithLabel = Template.args({
    label: 'Description',
    placeholder: 'Enter a value'
}).build();
export const WithIndicator = Template.args({
    placeholder: '0.00',
}).build(args => `<x-input ${toProps(args)}><span slot="indicator">USD</span></x-input>`);
export const WithInformation = Template.args({
    placeholder: '0.00',
    info: 'This is a field with a description hover info icon'
}).build(args => `<x-input ${toProps(args)}><x-icon slot="indicator" name="credit-card"></x-icon></x-input>`);
export const WithMask = Template.args({
    label: 'Pattern Phone',
    mask: '+{7}(000)000-00-00',
    placeholder: 'Enter numbers'
}).build();
export const WithSuggestion = Template.args({
    label: 'Country',
    placeholder: 'Name a country',
}).build(args => `<x-input ${toProps(args)}>
	<x-input-suggestion block>
		<x-input-suggestion-item>
			<x-flag slot="left" code="HN" class="mr-2"></x-flag>
			Honduras
		</x-input-suggestion-item>
		<x-input-suggestion-item>
			<x-flag slot="left" code="PA" class="mr-2"></x-flag>
			Panama
		</x-input-suggestion-item>
		<x-input-suggestion-item>
			<x-flag slot="left" code="CR" class="mr-2"></x-flag>
			Costa Rica
		</x-input-suggestion-item>
		<x-input-suggestion-item>
			<x-flag slot="left" code="MX" class="mr-2"></x-flag>
			Mexico
		</x-input-suggestion-item>
		<span slot="results">Mostrando <strong>4</strong> recomendacion(es)</span>
	</x-input-suggestion-item>
</x-input>`);
export const Loading = Template.args({
    loading: true,
    value: 'Example'
}).build();
export const Disabled = Template.args({
    value: 'Example',
    disabled: true,
}).build();
export const Cleanable = Template.args({
    label: 'Cleanable input',
    value: 'Example',
    cleanable: true,
}).build();
export const PasswordType = Template.args({
    value: 'Secret',
    type: 'password',
}).build();
export const NumericType = Template.args({
    type: 'numeric',
    value: 10,
    min: 1,
    max: 20
}).build();
export const AmountType = Template.args({
    type: 'amount',
    value: 10.99,
}).build(args => `<x-input ${toProps(args)}>
	<select slot="indicator">
		<option>USD</option>
		<option>HNL</option>
	</select>
</x-input>`);
export const ColorType = Template.args({
    label: 'Theme color',
    type: 'color',
}).build();
export const OTPType = Template.args({
    type: 'otp',
    maxlength: 6,
}).build();
export const RadioType = Template.args({}).build(() => `<x-divider class="mb-2">Simple style</x-divider>
<x-row>
	<x-col>
		<x-input-radio name="radio" value="first" checked>First selection</x-input-radio>
	</x-col>
	<x-col>
		<x-input-radio name="radio" value="second">Second selection</x-input-radio>
	</x-col>
	<x-col>
		<x-input-radio name="radio" value="third">Third selection</x-input-radio>
	</x-col>
</x-row>
<x-row class="mt-3 mb-4">
	<x-col>
		<x-input-radio name="radio" value="fourth" loading disabled>Fourth selection disabled and loading</x-input-radio>
	</x-col>
	<x-col>
		<x-input-radio name="radio" value="inverted" inverted>Inverted position</x-input-radio>
	</x-col>
</x-row>
<x-divider class="mb-2">Bordered box</x-divider>
<x-row>
	<x-col>
		<x-input-radio name="radio-bordered" bordered value="first" checked>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
			<p>Quia, animi voluptates velit nobis id porro. Reprehenderit quibusdam sunt ea!</p>
			<p>Doloremque esse commodi id consequuntur ducimus eos similique molestiae repellat voluptate?</p>
		</x-input-radio>
	</x-col>
	<x-col>
		<x-input-radio name="radio-bordered" bordered value="second">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque vitae, tenetur quasi dolores alias quas molestiae rerum exercitationem ea incidunt maxime consequatur odit labore beatae.</p>
			<p>Debitis, officiis! Nisi, officia sint.</p>
		</x-input-radio>
	</x-col>
	<x-col>
		<x-input-radio name="radio-bordered" bordered value="third">
			<p>Excepturi atque quisquam, ipsam repellat repudiandae officia magnam amet ea error dolor quam animi molestiae laborum eveniet alias velit placeat assumenda. Ducimus.</p>
		</x-input-radio>
	</x-col>
</x-row>
<x-row class="mt-3">
	<x-col>
		<x-input-radio name="radio-bordered" bordered value="fourth" loading disabled>
			<p>Disabled and loading selection</p>
			<p>Aliquam doloremque dignissimos praesentium laborum omnis numquam maxime sunt! Praesentium ullam, culpa voluptatibus, amet iure similique, corporis laudantium maxime dolor vero sint?</p>
		</x-input-radio>
	</x-col>
</x-row>`);
export const CheckboxType = Template.args({}).build(() => `<x-divider class="mb-2">Simple style</x-divider>
<x-row>
	<x-col>
		<x-input-checkbox name="checkbox" value="first" checked>First selection</x-input-checkbox>
	</x-col>
	<x-col>
		<x-input-checkbox name="checkbox" value="second">Second selection</x-input-checkbox>
	</x-col>
	<x-col>
		<x-input-checkbox name="checkbox" value="third">Third selection</x-input-checkbox>
	</x-col>
</x-row>
<x-row class="mt-3 mb-4">
	<x-col>
		<x-input-checkbox name="checkbox" value="fourth" loading disabled>Fourth selection disabled and loading</x-input-checkbox>
	</x-col>
	<x-col>
		<x-input-checkbox name="checkbox" value="indeterminate" checked indeterminate disabled>Indeterminate</x-input-checkbox>
	</x-col>
	<x-col>
		<x-input-checkbox name="checkbox" value="inverted" inverted>Inverted position</x-input-checkbox>
	</x-col>
</x-row>
<x-divider class="mb-2">Bordered box</x-divider>
<x-row>
	<x-col size="12" class="mb-2">
		<x-input-checkbox name="checkbox-bordered" bordered value="first" checked>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
			<p>Quia, animi voluptates velit nobis id porro. Reprehenderit quibusdam sunt ea!</p>
			<p>Doloremque esse commodi id consequuntur ducimus eos similique molestiae repellat voluptate?</p>
		</x-input-checkbox>
	</x-col>
	<x-col size="12" class="mb-2">
		<x-input-checkbox name="checkbox-bordered" bordered value="second">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque vitae, tenetur quasi dolores alias quas molestiae rerum exercitationem ea incidunt maxime consequatur odit labore beatae.</p>
			<p>Debitis, officiis! Nisi, officia sint.</p>
		</x-input-checkbox>
	</x-col>
	<x-col size="12" class="mb-2">
		<x-input-checkbox name="checkbox-bordered" bordered value="third">
			<p>Excepturi atque quisquam, ipsam repellat repudiandae officia magnam amet ea error dolor quam animi molestiae laborum eveniet alias velit placeat assumenda. Ducimus.</p>
		</x-input-checkbox>
	</x-col>
</x-row>
<x-row class="mt-3">
	<x-col>
		<x-input-checkbox name="checkbox-bordered" bordered value="fourth" loading disabled>
			<p>Disabled and loading selection</p>
			<p>Aliquam doloremque dignissimos praesentium laborum omnis numquam maxime sunt! Praesentium ullam, culpa voluptatibus, amet iure similique, corporis laudantium maxime dolor vero sint?</p>
		</x-input-checkbox>
	</x-col>
</x-row>`);
