import { Form, Image, Input, Typography } from "antd";
import cx from "classnames";
import styles from "./bankDetails.module.scss";
import { UploadOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
const { Text } = Typography;
const BankDetails = (props: any) => {
  const [isReady, setOldData] = useState<any>(false);

  const [form] = Form.useForm();
  useEffect(() => {
    const _keydata: any = (sessionStorage.getItem('VendorOnBoarding'));
    if (_keydata != '') {
      const data = JSON.parse(_keydata);
      if (props.steps[4].formData == null) {
        form.setFieldsValue({
          ['bank_name']: data.bank_name,
          ['bank_account_number']: data.bank_account_number,
          ['bank_ifsc_code']: data.bank_ifsc_code
        })
      }
    }
    setOldData(true)
    form.submit();
  }, [props.current]);
  const onFinish = (e: any) => {
    if (props.current == 4)
      props.formData(e);
  }
  return (
    <>
      {isReady &&
        <div className={(props.current == 4 ? cx("ant-row gutterRow") : ' hidden')}>
          <h2 className={styles.leftTitle}>Bank Details</h2>

          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-9 gutterCol", styles.rightCardBorder
            )}
          >

            <Form
              name="normal_login"
              form={form}
              layout="vertical"
              className="login-form"
              initialValues={{ remember: false }}
              onFinish={onFinish}
            >
              <Form.Item
                label="Bank Name"
                name="bank_name"
                className={cx(
                  "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol pr-1"
                )}
                // rules={[

                //   {
                //     required: true,
                //     message: `Enter Bank Name`,
                //   },
                // ]}
              >
                <Input placeholder="Enter Bank Name" style={{ width: '100%', float: 'right' }} onChange={() => { form.submit(); }} />
              </Form.Item>

              <Form.Item
                label="Bank Account Number"
                name="bank_account_number"
                className={cx(
                  "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol pr-1"
                )}
                // rules={[

                //   {
                //     required: true,
                    
                //     message: `Enter Bank Account Number`,
                //   },
                // ]}
              >
                <Input placeholder="Enter Bank Account Number" style={{ width: '100%', float: 'right' }} onChange={() => { form.submit(); }} />
              </Form.Item>
              <Form.Item
                label="Bank IFSC Code"
                name="bank_ifsc_code"
                className={cx(
                  "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 mb-3 gutterCol pr-1"
                )}
                // rules={[

                //   {
                //     required: true,
                //     pattern: /^[A-Za-z]{4}\d{7}$/,
                //     message: `Enter Bank IFSC Code`,
                //   },
                // ]}
              >
                <Input placeholder="Enter Bank IFSC Code" style={{ width: '100%', float: 'right' }} onChange={() => { form.submit(); }} />
              </Form.Item>
            </Form>
          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-8 gutterCol"
            )}
          >
            <h2 className={styles.leftTitle}>UPI Payments</h2>
            <Image preview={false} width={51} height={51} src={"/images/visa.svg"} alt="visa" />
            <Image preview={false} width={51} height={51} src={"/images/master.svg"} alt="master" />
            <Image preview={false} width={51} height={51} src={"/images/paypal.svg"} alt="paypal" />

          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-7 gutterCol"
            )}
          >
            {/* <div className={styles.rightCardContainer}>
            <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
              <InfoCircleOutlined style={{ color: "#291C61" }} />
              <h2 className={styles.cardTitle}>Bank Account Details</h2>
            </div>
            <div className={cx("mt-2 mb-2")}>
              <Text className={styles.cardContent}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqu.
              </Text>
            </div>
            </div> */}
          </div>
        </div>
      }
    </>
  )

}
export default BankDetails;