import { Button, Form, Image, Input, notification } from "antd";
import React, { FC, useRef, useState } from "react";
import styles from "./sellerEnquiry.module.scss";
import cx from "classnames";
import MediaQuery from "react-responsive";
import { getAnEnquiry } from "../../../pages/api/productDetails/getAnEnquiry";
import TextArea from "antd/lib/input/TextArea";
import ReCAPTCHA from "react-google-recaptcha";
import FormInput from "../common/FormInput";
import *as EnquiryApi from "../../../pages/api/enquiry"

const sellerEnquiry: FC<any> = (props) => {
  const [form] = Form.useForm();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [message, setMessage] = useState("");
  const [productName, setProductName] = useState("");
  const [productBrand, setProductBrand] = useState("");
  const [category, setCategory] = useState("");
  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 onReqCallbackClick = (formData: any) => {
    const params = {
      first_name: formData?.firstName,
      last_name: formData?.lastName,
      phone: formData?.phoneNumber,
      email: formData?.email,
      message: formData?.message,
      type: 2,
    };

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

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

      notification.success({ message: "Enquiry Form Submitted Successfully" });
      // router.push("/home#enquiryForm", undefined, { shallow: true });
    });
    return;
    getAnEnquiry(params).then((res) => {
      if (res === "success") {
        openNotification("success");
      } else {
        openNotification("error");
      }
    });
    form.resetFields();
  };

  const VerifyCaptcha = (value: any) => {
    setVerified(true);
  };

  const openNotification = (type: NotificationType) => {
    notification[type]({
      message: getMessageBasedOnType(type).heading,
      description: getMessageBasedOnType(type).description,
    });
  };

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

  const img = props?.images?.find((e:any) => e.sort === '2');
  return (
    <>
      <MediaQuery minWidth={769}>
        <div className={cx(styles.enquiryContainer)}>
          <div className={cx(styles.enquiryContainerInnerDiv)}>
            <div className={"ant-row"} style={{width:"90%"}}>
              <div
                className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}
                
              >
                <div className="sellerEnquiryImage" style={{background:"#f5f5f5",borderTopLeftRadius: "2.2em",
                  borderBottomLeftRadius: "2.2em"}}>
                  <Image
                    src={img?.image}
                    style={{ height: "100%",objectFit: "cover" }}
                    preview={false}
                    alt="image"
                  />
                </div>
              </div>
              <div
                className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}
                style={{
                  background: " #f5f5f5",
                  borderTopRightRadius: "2.2em",
                  borderBottomRightRadius: "2.2em",
                }}
              >
                <div className={styles.formCardContainer}>
                  <h2 className={styles.sellerSectionTitle}>Send an Enquiry</h2>
                  <a className={styles.note}>
                    Fill this form & our experts will get in touch with you.
                    Usually responds in 2-3 working days
                  </a>
                  <div className={styles.formContainer}>
                    <Form
                      form={form}
                      name="basic"
                      layout="vertical"
                      onFinish={onReqCallbackClick}
                      validateMessages={validateMessages}>

                      <div className={cx(styles.inputRow)}>
                        <Form.Item
                          className={cx(styles.inputContainer)}
                          name="firstName"
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                          style={{ marginRight: "1em" }}
                        >
                          <FormInput
                            label="First Name"
                            placeholder="First Name"
                            name="First Name"
                            type="text"
                            required="true"
                            inputType="Text"
                          />
                        </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>
                      </div>

                      <div className={cx(styles.inputRow)}>
                        <Form.Item
                          name="phoneNumber"
                          className={cx(styles.inputContainer)}
                          rules={[
                            {
                              required: true,
                            },
                            {
                              type: "string",
                              min: 10,
                              max: 10,
                            },
                          ]}
                          style={{ marginRight: "1em" }}
                        >
                          <FormInput
                            label="Phone Number"
                            placeholder="Phone No."
                            name="phone"
                            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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </MediaQuery>

      <MediaQuery maxWidth={768}>
        <div className={cx(styles.enquiryContainer)}>
          <div
            className={"ant-row"}
            style={{
              background: " #f5f5f5",
              borderRadius: "2.2em",
              padding: "1em",
            }}
          >
            <div
              className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}
            >
              <div className="sellerEnquiryImage">
                <Image
                  src={img?.image}
                  style={{ height: "100%", borderRadius: "2.2em" }}
                  preview={false}
                />
              </div>
            </div>
            <div
              className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}
            >
              <div className={styles.formCardContainer}>
                <h2 className={styles.sellerSectionTitle}>Send an Enquiry</h2>
                <a className={styles.note}>
                  Fill this form & our experts will get in touch with you.
                  Usually responds in 2-3 working days
                </a>
                <div className={styles.formContainer}>
                  <Form
                    form={form}
                    name="basic"
                    layout="vertical"
                    onFinish={onReqCallbackClick}
                    validateMessages={validateMessages}
                  >
                    <div className={cx("ant-row")}>
                      <Form.Item
                        label="First Name"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        name="firstName"
                        rules={[
                          {
                            required: true,
                          },
                        ]}
                      >
                        <Input
                          value={firstName}
                          onChange={(evt) => {
                            setFirstName(evt.target.value);
                          }}
                          type="text"
                          className={styles.first_name}
                          placeholder={"First Name"}
                        />
                      </Form.Item>

                      <Form.Item
                        label="Last Name"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        name="lastName"
                        rules={[
                          {
                            required: true,
                          },
                        ]}
                      >
                        <Input
                          value={lastName}
                          onChange={(evt) => {
                            setLastName(evt.target.value);
                          }}
                          type="text"
                          className={styles.first_name}
                          placeholder={"Last Name"}
                        />
                      </Form.Item>
                    </div>
                    <div className={cx("ant-row")}>
                      <Form.Item
                        label="Phone Number"
                        name="phoneNumber"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        rules={[
                          {
                            required: true,
                          },
                          {
                            type: "string",
                            min: 10,
                            max: 10,
                          },
                        ]}
                      >
                        <Input
                          type="number"
                          className={cx(styles.first_name, "numberInput")}
                          placeholder={"Phone"}
                          maxLength={10}
                          value={phone}
                          onChange={(evt) => {
                            setPhone(evt.target.value);
                          }}
                        />
                      </Form.Item>
                      <Form.Item
                        label="E-mail"
                        name="email"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        rules={[
                          { required: true },
                          {
                            type: "email",
                            pattern:
                              /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
                            message: `Please enter valid e-mail address`,
                          },
                        ]}
                      >
                        <Input
                          value={email}
                          onChange={(evt) => {
                            setEmail(evt.target.value);
                          }}
                          type="text"
                          className={styles.first_name}
                          placeholder={"Email"}
                        />
                      </Form.Item>
                    </div>

                    {/* <Form.Item
                      label="Product Name"
                      name="ProductName"
                      rules={[
                        {
                          required: true,
                        },
                        {
                          min: 10,
                          message: "Please enter a Valid Product",
                        },
                      ]}
                    >
                      <Input
                        value={productName}
                        onChange={(evt) => {
                          setEmail(evt.target.value);
                        }}
                        type="text"
                        className={styles.first_name}
                        placeholder={"Product Name"}
                      />
                    </Form.Item>
                    <div className={cx("ant-row")}>
                      <Form.Item
                        label="Product Brand"
                        name="brand"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        rules={[]}
                      >
                        <Input
                          value={productBrand}
                          onChange={(evt) => {
                            setEmail(evt.target.value);
                          }}
                          type="text"
                          className={styles.first_name}
                          placeholder={"Product Brand"}
                        />
                      </Form.Item>
                      <Form.Item
                        label="Product Category"
                        name="ProductCategory"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        rules={[]}
                      >
                        <Input
                          type="text"
                          className={styles.first_name}
                          placeholder={"Product Category"}
                          maxLength={10}
                          value={category}
                          onChange={(evt) => {
                            setPhone(evt.target.value);
                          }}
                        />
                      </Form.Item>
                    </div> */}
                    <Form.Item
                      label="Message"
                      name="message"
                      rules={[
                        {
                          required: true,
                          message: "Please Enter Your Message!",
                        },
                      ]}
                    >
                      <TextArea
                        value={message}
                        showCount
                        onChange={(evt) => {
                          setMessage(evt.target.value);
                        }}
                        id="footer-newsletter-address"
                        placeholder={"Message"}
                        style={{ height: 80, resize: "none" }}
                        maxLength={160}
                      />
                    </Form.Item>
                    <Form.Item
                      name="captcha"
                      label="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}
                        style={{ width: "100%" }}
                      />
                    </Form.Item>
                    <Form.Item>
                      <Button type="primary" htmlType="submit">
                        Send Enquiry
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </MediaQuery>
    </>
  );
};

export default sellerEnquiry;