import { Button, Checkbox, Form, Input,Row,Col } from 'antd';
import React from 'react';
import styles from './form.module.scss'
import cx from "classnames";
const CustomForm: React.FC = () => {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
   <div className="container">
     <Form
      name="basic"
   
      layout="vertical"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <div className ={cx("ant-row")}>
        <div className ={cx(styles.formItem,"ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-10 ")}>
      <Form.Item 
        label="Name"
        name="name"
        rules={[{ required: true, message: 'Please input your username!' }]}
        
      >
        <Input className={styles.textInput}/>
      </Form.Item>
        </div>

        <div className ={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-10")}>
      <Form.Item 
        label="Email Address"
        name="email"
        rules={[ {
          required: true,
          message: "Please Enter your Email Address!",
        },
        {
          pattern:
            /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
          message: `Enter Valid Mail Address`,
        },]}
      >
       <Input className={styles.textInput}/>

      </Form.Item>
      </div>
      </div>

      <div className ={cx("ant-row ")}>
      <div className ={cx(styles.formItem,"ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-10")}>
      <Form.Item
      
        label="Phone"
        name="phone"
        rules={[{ required: true, message: 'Please input your username!' },{pattern:/^[6-9]\d{9}$/,message:'Enter  valid phone number'}]}
      >
        <Input className={styles.textInput} />
      </Form.Item>
      </div>

      <div className ={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-10 ")}>
      <Form.Item
        label="GST number :"
        name="GST number:"
        rules={[{ required: true, message: 'Please input your gst number!' },
        {pattern:/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/ ,message: `Enter  valid GST number`, }
      ]}
      >
        <Input className={styles.textInput}/>
      </Form.Item>
      </div>
      </div>
      

     

      <Form.Item >
        <Button type="primary" className={styles.button}>
          Update
        </Button>
      </Form.Item>
    </Form>
   </div>
  );
};
export default CustomForm;