import Builder, { toProps } from "../../utils/builder";
import { MockData } from "./playground.mock";
export default {
    title: "Components/Stepper",
    component: 'x-stepper',
    subcomponents: ['x-step'],
    parameters: {
        mockData: MockData,
    },
};
export const Simple = new Builder(args => `
	<x-stepper ${toProps(args)}>
		<x-step label="Services">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta minus est odio animi iste aliquam reprehenderit, optio nam neque porro dolorem incidunt tenetur! Doloribus cum corrupti eveniet maxime eaque in.</p>
		</x-step>
		<x-step label="About Us">
			<p><label><input type="checkbox" v-model="hideNext"/> Hide next step</label></p>
			<ul>
				<li>Hello</li>
				<li>World</li>
				<li>from</li>
				<li>Vue.js</li>
			</ul>
			<ul>
				<li>Hello</li>
				<li>World</li>
				<li>from</li>
				<li>Vue.js</li>
			</ul>
			<ul>
				<li>Hello</li>
				<li>World</li>
				<li>from</li>
				<li>Vue.js</li>
			</ul>
		</x-step>
		<x-step label="Pricing">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error libero ex soluta. Ut minima similique omnis veniam. Eaque ipsa doloremque enim esse nulla vitae atque sit quos eius. Illum, quaerat.</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, reiciendis pariatur provident sapiente maiores laudantium et quis distinctio dicta ex iusto natus, fuga nemo sit autem alias dolores, ipsam voluptas?</p>
		</x-step>
	</x-stepper>
`).args({}).build();
export const WithDescription = new Builder(args => `
	<x-stepper ${toProps(args)}>
		<x-step label="Services" description="What we do for you" icon="dashboard">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta minus est odio animi iste aliquam reprehenderit, optio nam neque porro dolorem incidunt tenetur! Doloribus cum corrupti eveniet maxime eaque in.</p>
		</x-step>
		<x-step label="About Us" description="Why we do it?" icon="answer">
			<p><label><input type="checkbox" v-model="hideNext"/> Hide next step</label></p>
			<ul>
				<li>Hello</li>
				<li>World</li>
				<li>from</li>
				<li>Vue.js</li>
			</ul>
			<ul>
				<li>Hello</li>
				<li>World</li>
				<li>from</li>
				<li>Vue.js</li>
			</ul>
		</x-step>
		<x-step label="Pricing" description="How much we do it for" icon="coins">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error libero ex soluta. Ut minima similique omnis veniam. Eaque ipsa doloremque enim esse nulla vitae atque sit quos eius. Illum, quaerat.</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, reiciendis pariatur provident sapiente maiores laudantium et quis distinctio dicta ex iusto natus, fuga nemo sit autem alias dolores, ipsam voluptas?</p>
		</x-step>
	</x-stepper>
`).args({}).build();
export const WithValidation = new Builder(args => `
	<x-stepper ${toProps(args)}>
		<x-step label="Native components" icon="device-other" submit>
			<form data-step-id="1" data-custom-field="lorem" action="http://stepper.test" method="POST" onsuccess="console.log(e)">
				<legend>Form</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>
			</form>
		</x-step>

		<x-step label="Custom components" icon="lang-xml">
			<div id="step-1-results"></div>

			<x-form data-step-id="2" data-custom="lorem">
				<legend>Form</legend>

				<hr>

				<x-form-group>
					<x-input-group>
						<x-datepicker label="Birthdate" name="date" required></x-datepicker>
						<x-timepicker label="Time" name="time" now required></x-timepicker>
					</x-input-group>
					<x-input-error errors-for="date"></x-input-error>
					<x-input-error errors-for="time"></x-input-error>
				</x-form-group>

				<x-form-group>
					<x-row>
						<x-col>
							<label>Currency</label>
							<x-selector name="currency" required unselectable>
								<x-selector-item image="a.png">USD</x-selector-item>
								<x-selector-item image="b.png">HNL</x-selector-item>
							</x-selector>
							<x-input-error errors-for="currency"></x-input-error>
						</x-col>

						<x-col>
							<label>Sex</label>
							<x-selector name="sex" required unselectable>
								<x-selector-tag>Male</x-selector-tag>
								<x-selector-tag>Female</x-selector-tag>
							</x-selector>
							<x-input-error errors-for="sex"></x-input-error>
						</x-col>

						<x-col size="2">
							<label>Age</label><br>
							<x-quantity name="age" min="18" max="25" required></x-quantity>
							<x-input-error errors-for="age"></x-input-error>
						</x-col>
					</x-row>
				</x-form-group>

				<x-form-group>
					<x-row>
						<x-col>
							<x-slider name="range" required></x-slider>
							<x-input-error errors-for="range"></x-input-error>
						</x-col>

						<x-col>
							<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-col>
					</x-row>
				</x-form-group>
			</x-form>
		</x-step>
	</x-stepper>
	<script>
		document.querySelector('x-step').validate = () => new Promise((resolve) => setTimeout(() => resolve(), 2000));

		document.querySelector('[data-step-id="1"]').addEventListener('success', (e) => {
			document.getElementById('step-1-results').innerHTML = e.detail.data.html;
		});
	</script>
`).args({}).build();
