import React, { FC, useEffect, useRef, useState } from "react";
import { Modal, Button, Input, notification, Form } from "antd";
import get from "lodash/get";

import styles from "../rightPane.module.scss";
import { getAnEnquiry } from "../../../../pages/api/productDetails/getAnEnquiry";
import { useMediaQuery } from "react-responsive";
import cx from "classnames";
import FormInput from "../../../sellerLanding/common/FormInput";
import ReCAPTCHA from "react-google-recaptcha";
import * as EnquiryApi from "../../../../pages/api/enquiry";

const EnquiryModal: FC<any> = ({ handleClose, productDetails,loginRes }) => {
  
  const [form] = Form.useForm();
  const [enquiryFormData, setEnquiryFormData] = useState<any>({
    firstName: "",
    lastName: "",
    company: "",
    email: "",
    phone: "",
    message: "",
  });

  const captchaRef = useRef<any>("");
  const [verified, setVerified] = useState(false);
  type NotificationType = "success" | "info" | "warning" | "error";
  const getMessageBasedOnType = (key: NotificationType) => {
    return key === "success"
      ? {
        heading: "Success !!!",
        description:
          "Successfully submitted the enquiry, Our team will get back to you shortly",
      }
      : {
        heading: "Error !!!",
        description:
          "An error occured while submitting your enquiry !, Please try again in sometime",
      };
  };
  const openNotification = (type: NotificationType) => {
    notification[type]({
      message: getMessageBasedOnType(type).heading,
      description: getMessageBasedOnType(type).description,
    });
  };

  const isMobileRes = useMediaQuery({ maxWidth: 767.68 });
  const handleSubmit = (formData: any) => {
    const params = {
      first_name: formData?.firstName,
      last_name: formData?.lastName,
      phone: formData?.phoneNumber,
      email: formData?.email,
      message: formData?.message,
      type: 1,
      product_id: productDetails?.id
    };

    const token = captchaRef?.current?.getValue();

    EnquiryApi.enquiryPost(params).then((res) => {
      form.resetFields();
      captchaRef?.current?.reset();

      notification.success({ message: "Enquiry Form Submitted Successfully" });
      handleCancel();
      // router.push("/home#enquiryForm", undefined, { shallow: true });
    });
  };
  const handleCancel = () => {
    handleClose();
  };
  const handleFormChange = (field: string, event: any) => {
    const updatedEnquiryFormData = {
      ...enquiryFormData,
      [field]: event.target.value,
    };
    setEnquiryFormData(updatedEnquiryFormData);
  };

  const validateMessages = {
    required: "Please enter your ${label}!",
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  const VerifyCaptcha = (value: any) => {
    setVerified(true);
  };

  useEffect(() => {
    setEnquiryFormData({
      firstName: loginRes?.data?.first_name,
      lastName: loginRes?.data?.last_name,
      company: loginRes?.data?.company_name,
      email: loginRes?.data?.email,
      phone: loginRes?.data?.phone
    })

    form.setFieldsValue({
      email: loginRes?.data?.email
    });
    form.setFieldsValue({
      phone: loginRes?.data?.phone
    });
    form.setFieldsValue({
      firstName: loginRes?.data?.first_name
    });
    form.setFieldsValue({
      lastName: loginRes?.data?.last_name
    });
    form.setFieldsValue({
      company: loginRes?.data?.company_name,
    });

  }, [])

  form.setFieldsValue({
    email: loginRes?.data?.email
  });
  form.setFieldsValue({
    phone: loginRes?.data?.phone
  });
  form.setFieldsValue({
    firstName: loginRes?.data?.first_name
  });
  form.setFieldsValue({
    lastName: loginRes?.data?.last_name
  });
  form.setFieldsValue({
    company: loginRes?.data?.company_name,
  });
//console.log(form,"form")
  return (
    <>
    <Modal
      visible
      onCancel={handleCancel}
      footer={null}
      width={isMobileRes ? "90%" : "40%"}
    >
      <>
        <div className={styles.enquiryHeadingContainer}>
          <div className={styles.enquiryMainHeading}>
            Get An Product Enquiry
          </div>
          <div className={styles.enquirySubHeading}>
            Fill this form and our experts will get in touch with you
          </div>
        </div>
        <Form
          name="enquiryForm"
          initialValues={{ remember: true }}
          onFinish={handleSubmit}
          onFinishFailed={onFinishFailed}
          layout="vertical"
          autoComplete="on"
          form={form}
        >
          <div className={cx(styles.inputRow)}>
            <Form.Item
              className={cx(styles.inputContainer)}
              name="firstName"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <FormInput
                label="First Name"
                placeholder="First Name"
                name="First Name"
                type="text"
                required="true"
                inputType="Text"
                value={enquiryFormData?.firstName}
                onChange={(e:any) => handleFormChange("firstName", e)}
              />
            </Form.Item>

            <Form.Item
              className={cx(styles.inputContainer)}
              name="lastName"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <FormInput
                label="Last Name"
                placeholder="Last Name"
                name="First Name"
                type="text"
                required="true"
                inputType="Text"
              />
            </Form.Item>
            <Form.Item
              className={cx(styles.inputContainer)}
              name="company"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <FormInput
                label="Company Name"
                placeholder="Company Name"
                name="Company Name"
                type="text"
                required="true"
                inputType="Text"
              />
            </Form.Item>
          </div>

          <div className={cx(styles.inputRow)}>
            <Form.Item
              name="phone"
              className={cx(styles.inputContainer)}
              rules={[
                {
                  required: true,
                },
                {
                  type: "string",
                  min: 10,
                  max: 10,
                },
              ]}
            >
              <FormInput
                label="Phone Number"
                placeholder="Phone Number"
                name="Phone Number"
                type="number"
                required="true"
                inputType="Number"
              />
            </Form.Item>
            <Form.Item
              name="email"
              className={cx(styles.inputContainer)}
              rules={[
                { required: true },
                {
                  type: "email",
                  pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
                  message: `Please enter valid e-mail address`,
                },
              ]}
            >
              <FormInput
                label="Email"
                placeholder="E-mail Address"
                name="email"
                type="email"
                required="true"
                inputType="Text"
              />
            </Form.Item>
          </div>

          {/* <Form.Item
                        name="Product Name"
                        rules={[
                          {
                            required: true,
                          },
                          {
                            min: 10,
                            message: "Please enter a Valid Product",
                          },
                        ]}
                      >
                        <FormInput
                          label="Product Name"
                          placeholder="Product Name"
                          name="Product Name"
                          type="text"
                          required="true"
                          inputType="Text"
                        />
                      </Form.Item> */}

          {/* <div className={cx(styles.inputRow)}>
                        <Form.Item
                          name="Product Brand"
                          className={cx(styles.inputContainer)}
                          rules={[]}
                          style={{ marginRight: "1em" }}
                        >
                          <FormInput
                            label="Product Brand"
                            placeholder="Product Brand"
                            name="Product Brand"
                            type="text"
                            inputType="Text"
                          />
                        </Form.Item>
                        <Form.Item
                          name="Product Category"
                          className={cx(styles.inputContainer)}
                          rules={[]}
                        >
                          <FormInput
                            label="Product Category"
                            placeholder="Product Category"
                            name="Product Name"
                            type="text"
                            inputType="Text"
                          />
                        </Form.Item>
                      </div> */}

          <Form.Item
            name="message"
            rules={[
              {
                required: true,
                message: "Please Enter Your Message!",
              },
            ]}
          >
            <FormInput
              label="Message"
              placeholder="Message"
              name="Message"
              type="TextArea"
              required="true"
              inputType="TextArea"
            />
          </Form.Item>
          <Form.Item
            name="Captcha"
            extra="We must make sure that your are a human."
            rules={[
              {
                required: true,
                message: "Please verify the captcha",
              },
            ]}
          >
            <ReCAPTCHA
              sitekey={"6LdqKsImAAAAAK9lbh_bxe5RYToQvRzDT2TxItP5"}
              onChange={VerifyCaptcha}
              ref={captchaRef}
            />
          </Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            style={{ height: 40, width: 150, marginTop: "1em" }}
          >
            Send Enquiry
          </Button>
        </Form>
        {/* <div>

					<Input
						className={styles.input}
						onChange={(e) => handleFormChange("firstName", e)}
						placeholder='First Name'
						value={get(enquiryFormData, 'firstName', '')}
					/>
					<Input
						className={styles.input}
						onChange={(e) => handleFormChange("lastName", e)}
						placeholder='Last Name'
						value={get(enquiryFormData, 'lastName', '')}
					/>

					<Input
						className={styles.input}
						onChange={(e) => handleFormChange("phone", e)}
						placeholder='Phone'
						value={get(enquiryFormData, 'phone', '')}
					/>
					<Input
						className={styles.input}
						onChange={(e) => handleFormChange("email", e)}
						placeholder='Email'
						value={get(enquiryFormData, 'email', '')}
					/>

					<Input.TextArea
						placeholder='Message'
						className={styles.textArea}
						rows={6}
						onChange={(e) => handleFormChange("message", e)}
						value={get(enquiryFormData, 'message', '')}
					/>

				</div> */}
        {/* <Button onClick={handleSubmit} className='mt-4' type="primary">Send Enquiry</Button> */}
      </>
    </Modal>
    </>
  );
};

export default EnquiryModal;