import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Form',
    component: 'x-form',
    subcomponents: ['x-form-group', 'x-form-row'],
};
const Template = new Builder(args => `<x-card class="p-4">
		<x-form ${toProps(args)}>
			<legend>Form example</legend>
			<hr>
			<x-form-group>
				<x-input name="person" placeholder="Enter a name" required></x-input>
				<x-input-error errors-for="person"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-textarea label="Note" placeholder="Take a note ..." name="notes" minlength="10" maxlength="100" required></x-textarea>
				<x-input-error errors-for="notes"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-select name="size" placeholder="Chose your size" required>
					<option>Tall</option>
					<option>Medium</option>
					<option>Short</option>
				</x-select>
				<x-input-error errors-for="size"></x-input-error>
			</x-form-group>
			<x-form-group>
				<label>Sex</label>
				<x-input-radio name="sex" required>Male</x-input-radio>
				<x-input-radio name="sex">Female</x-input-radio>
				<x-input-error errors-for="sex"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-quantity name="age" label="Age" min="18" max="100" required></x-quantity>
				<x-input-error errors-for="age"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-slider name="salary" label="Monthly salary" min="1000" max="10000" step="1000" required></x-slider>
				<x-input-error errors-for="salary"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-select name="country" label="Country" required>
					<x-select-group label="Centro America">
						<x-select-option value="GT">
							<x-flag class="mr-2" slot="left" code="GT"></x-flag>
							Guatemala
						</x-select-option>
						<x-select-option value="HN">
							<x-flag class="mr-2" slot="left" code="HN"></x-flag>
							Honduras
						</x-select-option>
						<x-select-option value="CR">
							<x-flag class="mr-2" slot="left" code="CR"></x-flag>
							Costa Rica
						</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
						</x-select-option>
						<x-select-option value="US" disabled>
							<x-flag class="mr-2" slot="left" code="US"></x-flag>
							Estados Unidos
						</x-select-option>
						<x-select-option value="MX">
							<x-flag class="mr-2" slot="left" code="MX"></x-flag>
							Mexico
						</x-select-option>
					</x-select-group>
				</x-select>
				<x-input-error errors-for="country"></x-input-error>
			</x-form-group>
			<x-form-group>
				<x-selector label="Location" name="location" required unselectable>
					<x-selector-tag>City</x-selector-tag>
					<x-selector-tag>Town</x-selector-tag>
				</x-selector>
				<x-input-error errors-for="location"></x-input-error>
			</x-form-group>
			<x-form-group>
				<hr>
				<x-button color="default" type="submit" tabindex="0">Send</x-button>
			</x-form-group>
			<div class="alert-block">
				<code></code>
			</div>
		</x-form>
	</x-card>`);
export const Simple = Template.args({
    method: 'POST',
    // action: 'https://pixelpay.app/version',
    action: 'http://playground-v9.test/api/test/',
    autocomplete: false,
}).build();
