import{j as e}from"./jsx-runtime-Dfk2JFgj.js";import{r as i}from"./index-CWN_QRa1.js";import{k as a,L as l,l as _,I as m,m as v,R as I,S as q,D as n,T}from"./index-DNsi8NHw.js";import{B as u}from"./index-CIVavKlu.js";import{a as j,C}from"./CheckGroup-BpaEcK_0.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./index-6WYjB5r3.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./v4-CtRu48qb.js";import"./index-DllfNvuz.js";import"./index-Cj3pldWQ.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";import"./index-DgIb9kCw.js";const P={title:"Components/Form",component:a},s=()=>{const[o,b]=i.useState(!0),t=a.useForm();i.useEffect(()=>{t.setValues({time:new Date}),setTimeout(()=>{b(!1)},2e3)},[]);const g=[{label:"Option_one",value:"1"},{label:"Option_two",value:"2"},{label:"Option_three",value:"3"}],x=[{label:"Option_one",value:"4"},{label:"Option_two",value:"6"},{label:"Option_three",value:"7"}];return e.jsx("div",{children:e.jsxs(a,{ref:t.ref,loading:o,onSubmit:(r,h)=>{console.log("onSubmit",r,h)},onValidSubmit:r=>{console.log("onValidSumit",r)},onChangeValues:r=>{r!=null&&r.name&&console.log("existe")},children:[e.jsx("div",{children:e.jsx(l,{title:!0,children:"report_setup"})}),e.jsxs("div",{children:[e.jsx("div",{style:{marginBottom:"32px"},children:e.jsx(_,{text:"clear_all",onClick:()=>{t.resetValues()}})}),e.jsx("div",{style:{marginBottom:"18px"},children:e.jsx(l,{subTitle:!0,children:"report_option"})}),e.jsx(a.Item,{name:"name",label:"username_label",rules:[{required:!0,message:"required_message"}],children:e.jsx(m,{type:"text",buttonText:"Button",icon:"person",placeholder:"username_label",iconPosition:"left"})}),e.jsx(a.Item,{name:"password",label:"password_label",rules:[{required:!0,message:"required_message"}],children:e.jsx(m,{type:"password",placeholder:"password_label",buttonText:"Button",icon:"key",iconPosition:"left"})}),e.jsx(a.Item,{name:"age",label:"Age",rules:[{required:!0,message:"required_message"},{min:-10,message:"Min value -10"},{max:45,message:"Max value 45"}],children:e.jsx(v,{id:"age",type:"number",placeholder:"Age"})}),e.jsx(a.Item,{name:"sex",label:"option_list",rules:[{required:!0,message:"required_message"}],children:e.jsx(I,{list:g,labelDir:"row"})}),e.jsx(a.Item,{name:"shopping_list",label:"option_list",rules:[{required:!0,message:"required_message"}],children:e.jsx(j,{list:x,labelDir:"column"})}),e.jsx(a.Item,{name:"checkbox",rules:[{required:!0,message:"required_message"}],children:e.jsx(C,{id:"checkbox",label:"Checkbox"})}),e.jsx(a.Item,{name:"subscription",label:"subscription_label",rules:[{required:!0,message:"required_message"}],children:e.jsx(q,{id:"option5",name:"toggle",optionLabels:["YES","NO"]})}),e.jsx(a.Item,{name:"date",label:"Date",rules:[{required:!0,message:"required_message"},{minDate:"Wed Jul 05 2023 00:00:00 GMT-0500 (hora estándar de Colombia)",message:"Min value Wed Jul 05 2023"},{maxDate:"Wed Jul 28 2023 00:00:00 GMT-0500 (hora estándar de Colombia)",message:"Max value Wed Jul 28 2023"}],children:e.jsx(n,{id:"date"})}),e.jsx(a.Item,{name:"dateTime",label:"Date time",rules:[{required:!0,message:"required_message"},{minDate:"Wed Jul 05 2023 20:30:00 GMT-0500 (hora estándar de Colombia)",message:"Min value Wed Jul 05 2023 20:30:00"},{maxDate:"Wed Jul 28 2023 09:15:00 GMT-0500 (hora estándar de Colombia)",message:"Max value Wed Jul 28 2023 09:15:00"}],children:e.jsx(n,{id:"dateTime",minDate:"Wed Jul 05 2023 20:30:00 GMT-0500 (hora estándar de Colombia)",maxDate:"Wed Jul 28 2023 09:15:00 GMT-0500 (hora estándar de Colombia)",showTimePicker:!0})}),e.jsx(a.Item,{name:"time",label:"Time",children:e.jsx(T,{id:"time",placeholder:"Time",variant:"dropdown",timeIntervals:5,format:"h:mm A",style:{width:"100%"}})})]}),e.jsxs("div",{children:[e.jsx(u,{variant:"secondary",onClick:()=>{t.resetValues()},children:"close"}),e.jsx(u,{variant:"primary",isDisabled:o,icon:"login",onClick:()=>{t.submit()},children:"submit_label"})]})]})})};s.__docgenInfo={description:"",methods:[],displayName:"FormStory"};var d,c,p;s.parameters={...s.parameters,docs:{...(d=s.parameters)==null?void 0:d.docs,source:{originalSource:`() => {
  const [isLoading, setIsLoading] = useState(true);
  const form = Form.useForm();
  useEffect(() => {
    form.setValues({
      time: new Date()
    });
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }, []);
  const list = [{
    label: "Option_one",
    value: "1"
  }, {
    label: "Option_two",
    value: "2"
  }, {
    label: "Option_three",
    value: "3"
  }];
  const listCheck = [{
    label: "Option_one",
    value: "4"
  }, {
    label: "Option_two",
    value: "6"
  }, {
    label: "Option_three",
    value: "7"
  }];
  return <div>
            <Form ref={form.ref} loading={isLoading} onSubmit={(values, invalidValues) => {
      console.log("onSubmit", values, invalidValues);
    }} onValidSubmit={values => {
      console.log("onValidSumit", values);
    }} onChangeValues={e => {
      if (e?.name) {
        console.log('existe');
      }
    }}>

                <div>
                    <Label title>{"report_setup"}</Label>
                </div>

                <div>
                    <div style={{
          marginBottom: '32px'
        }}>
                        <Link text={'clear_all'} onClick={() => {
            form.resetValues();
          }} />
                    </div>
                    <div style={{
          marginBottom: '18px'
        }}>
                        <Label subTitle>{"report_option"}</Label>
                    </div>
                    <Form.Item name="name" label={"username_label"} rules={[{
          required: true,
          message: 'required_message'
        }]}>
                        <Input type="text" buttonText="Button" icon="person" placeholder={"username_label"} iconPosition="left" />
                    </Form.Item>
                    <Form.Item name="password" label={"password_label"} rules={[{
          required: true,
          message: 'required_message'
        }]}>
                        <Input type="password" placeholder={"password_label"} buttonText="Button" icon="key" iconPosition="left" />
                    </Form.Item>
                    <Form.Item name="age" label={"Age"} rules={[{
          required: true,
          message: 'required_message'
        }, {
          min: -10,
          message: 'Min value -10'
        }, {
          max: 45,
          message: 'Max value 45'
        }]}>
                        <InputNumeric id="age" type="number" placeholder="Age" />
                    </Form.Item>
                    <Form.Item name="sex" label={"option_list"} rules={[{
          required: true,
          message: 'required_message'
        }]}>
                        <RadioGroup list={list} labelDir='row' />
                    </Form.Item>
                    <Form.Item name="shopping_list" label={"option_list"} rules={[{
          required: true,
          message: 'required_message'
        }]}>
                        <CheckGroup list={listCheck} labelDir='column' />
                    </Form.Item>

                    <Form.Item name="checkbox" rules={[{
          required: true,
          message: 'required_message'
        }]}>
                        <Checkbox id="checkbox" label='Checkbox' />
                    </Form.Item>

                    <Form.Item name="subscription" label={"subscription_label"} rules={[{
          required: true,
          message: 'required_message'
        }]}>
                        <Switch id="option5" name="toggle" optionLabels={["YES", "NO"]} />
                    </Form.Item>

                    <Form.Item name="date" label="Date" rules={[{
          required: true,
          message: 'required_message'
        }, {
          minDate: "Wed Jul 05 2023 00:00:00 GMT-0500 (hora estándar de Colombia)",
          message: 'Min value Wed Jul 05 2023'
        }, {
          maxDate: "Wed Jul 28 2023 00:00:00 GMT-0500 (hora estándar de Colombia)",
          message: 'Max value Wed Jul 28 2023'
        }]}>
                        <DatePicker id="date"
          //minDate="Wed Jul 05 2023 00:00:00 GMT-0500 (hora estándar de Colombia)" 
          //maxDate="Wed Jul 28 2023 00:00:00 GMT-0500 (hora estándar de Colombia)" 
          />
                    </Form.Item>

                    <Form.Item name="dateTime" label="Date time" rules={[{
          required: true,
          message: 'required_message'
        }, {
          minDate: "Wed Jul 05 2023 20:30:00 GMT-0500 (hora estándar de Colombia)",
          message: 'Min value Wed Jul 05 2023 20:30:00'
        }, {
          maxDate: "Wed Jul 28 2023 09:15:00 GMT-0500 (hora estándar de Colombia)",
          message: 'Max value Wed Jul 28 2023 09:15:00'
        }]}>
                        <DatePicker id="dateTime" minDate="Wed Jul 05 2023 20:30:00 GMT-0500 (hora estándar de Colombia)" maxDate="Wed Jul 28 2023 09:15:00 GMT-0500 (hora estándar de Colombia)" showTimePicker />
                    </Form.Item>

                    <Form.Item name="time" label="Time">
                        <TimePicker id="time" placeholder="Time" variant="dropdown" timeIntervals={5} format="h:mm A" style={{
            width: "100%"
          }} />
                    </Form.Item>
                </div>

                <div>
                    <Button variant="secondary" onClick={() => {
          form.resetValues();
        }}>{'close'}</Button>
                    <Button variant="primary" isDisabled={isLoading} icon="login" onClick={() => {
          form.submit();
        }}>{'submit_label'}</Button>
                </div>

            </Form>

        </div>;
}`,...(p=(c=s.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};const E=["FormStory"];export{s as FormStory,E as __namedExportsOrder,P as default};
