import { FC, useEffect, useState } from "react";
import Footer from "../components/home/footer/Footer";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import * as CategoryAPI from "./api/category";
import styles from "./fotterPage.module.scss";
import cx from "classnames";
import { Button, Form, Image, Input, notification } from "antd";
import { MailOutlined, ClockCircleOutlined, EnvironmentOutlined, FileTextOutlined } from "@ant-design/icons";
import * as EnquiryApi from "./api/enquiry";
import * as commonAPI from "./api/common"
import MediaQuery from "react-responsive";
import Router from "next/router";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import { baseUrl } from "../constants/urls";
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
const seoData = seoDataMap['contactUs'];
const ContactUs: FC<any> = () => {
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [company, setCompany] = useState("");
  const [message, setMessage] = useState("");
  const [stateArray, setStateArray] = useState([]);
  const [loginRes, setLoginRes] = useState<any>({});
  const [form] = Form.useForm();
  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });
    commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res) => {
      setStateArray(res?.data)
    })
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    form.setFieldsValue({
      email: details?.data?.email
    });


    form.setFieldsValue({
      phone: details?.data?.phone
    });
    form.setFieldsValue({
      firstName: details?.data?.first_name
    });
    form.setFieldsValue({
      lastName: details?.data?.last_name
    });
    form.setFieldsValue({
      company: details?.data?.company_name,
    });
    setFirstName(details?.data?.first_name);
    setEmail(details?.data?.email);
    setLastName(details?.data?.last_name);
    setPhone(details?.data?.phone);
    setCompany(details?.data?.company_name)
  }, []);




  const EnquirySubmit = () => {
    const params = {
      first_name: firstName,
      last_name: lastName,
      phone: phone,
      email: email,
      message: message,
      company_name: company
    };
    EnquiryApi.enquiryPost(params).then((res) => {
      notification.success({ message: "Enquiry Form Submited suceessfully!" });
      setFirstName("");
      setLastName("");
      setEmail("");
      setPhone("");
      setMessage("");
      setCompany("");
      Router.push("/home");
    });
  };

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

  return (
    <>
      <SEOHead {...seoData} />
      <MediaQuery maxWidth={768}>
        <MobileHeader stateArray={stateArray} />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray} />
      </MediaQuery>
      <div className={cx("container", styles.mobileView)}>
        <h1 className={styles.aboutUsTitle}>Contact Us</h1>
        {/* <div>
      <h1><span className={styles.spanTitle}>Legal Name:</span> INDISPARE SELLER SERVICES PRIVATE LIMITED</h1> */}
        {/* <p><span  className={styles.spanTitle}>Legal Address as per GST:</span>  Starrdust, 2ND FLOOR, PLOT NO.5, SY NO.62, Durgam Cheruvu Road, Madhapur, Hyderabad, Rangareddy, Telangana, 
500081</p>*/}
        {/* <p><span  className={styles.spanTitle}>Address:</span> Indispare, 3rd FLOOR, PLOT NO.5, SY NO.62, CoKarma,Durgam Cheruvu Road, Madhapur, Hyderabad, Rangareddy, Telangana,
500081</p>
<p><span  className={styles.spanTitle}>Email Address:</span> contact@indispare.com</p>
<p><span  className={styles.spanTitle}>Phone Number :</span> 7013197359</p>
<p><span  className={styles.spanTitle}>GST:</span>  36AAGCI6133F1ZP</p>
      </div> */}
        <div className="ant-row">
          <div className="ant-col ant-col-sm-24 ant-col-xl-12">
            <Form
              layout="vertical"
              name="enquiry_Form"
              onFinish={EnquirySubmit}
              onFinishFailed={onFinishFailed}
              autoComplete="on"
              initialValues={{ remember: true }}
              form={form}
              className={cx(
                "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-22",
                styles.contactUsForm
              )}
            >
              <h2 className={cx(styles.contactUsTitle, "py-2")}>
                Message us now
              </h2>
              <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,
                    pattern: /^[a-zA-Z][a-zA-Z ]+$/, message: "Please Enter First Name!",
                  }]}
                >
                  <Input
                    value={firstName}
                    onChange={(evt) => {
                      setFirstName(evt.target.value);
                    }}
                    type="text"
                    className={styles.first_name}
                    placeholder={"First Name"}
                  />
                </Form.Item>

                <Form.Item
                  className={cx(
                    "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                    styles.inputContainer
                  )}
                  label="Last Name"
                  name="lastName"
                  rules={[{
                    required: true,
                    pattern: /^[a-zA-Z][a-zA-Z ]+$/, message: "Please Enter Last Name!",
                  }]}
                >
                  <Input
                    value={lastName}
                    onChange={(evt) => {
                      setLastName(evt.target.value);
                    }}
                    type="text"
                    className={styles.first_name}
                    placeholder={"Last Name"}
                  />
                </Form.Item>
              </div>
              <Form.Item
                label="Phone Number"
                name="phone"
                rules={[
                  {
                    required: true,
                    message: "Please Enter Your Phone Number!",
                  },
                ]}
              >
                <Input
                  type="text"
                  className={styles.first_name}
                  placeholder={"Phone"}
                  maxLength={10}
                  value={phone}
                  onChange={(evt) => {
                    setPhone(evt.target.value);
                  }}
                />
              </Form.Item>
              <Form.Item
                label="Email Address"
                name="email"
                rules={[
                  {
                    required: true,
                    pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
                    message: `Enter Valid Mail Address`,
                  },
                ]}
              >
                <Input
                  value={email}
                  onChange={(evt) => {
                    setEmail(evt.target.value);
                  }}
                  type="text"
                  className={styles.home__enquiry_form__input_email}
                  placeholder={"Email"}
                />
              </Form.Item>
              <Form.Item
                label="Company Name"
                name="company"
                rules={[
                  {
                    required: true,
                    message: `Enter Comapany Name`,
                  },
                ]}
              >
                <Input
                  value={company}
                  onChange={(evt) => {
                    setCompany(evt.target.value);
                  }}
                  type="text"
                  className={styles.home__enquiry_form__input_email}
                  placeholder={"Comapany"}
                />
              </Form.Item>
              <Form.Item
                label="Message"
                name="message"
                rules={[
                  { required: true, message: "Please Enter Your Message!" },
                ]}
              >
                <Input
                  value={message}
                  onChange={(evt) => {
                    setMessage(evt.target.value);
                  }}
                  id="footer-newsletter-address"
                  type="text"
                  className={styles.home__enquiry_form__input_message}
                  placeholder={"Message"}
                />
              </Form.Item>
              <Form.Item>
                <Button
                  block
                  type="primary"
                  htmlType="submit"
                  className={styles.home__enquiry_form__button}
                >
                  Send
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div className={cx("ant-col ant-col-sm-24 ant-col-xl-12", styles.contactUsForm)}>
            <h2 className={cx(styles.contactUsTitle, "py-2")}>
              Contact Details
            </h2>
            <h3 className={styles.titleIndispare}>Indispare Seller Service Pvt. Ltd.</h3>
            <div className={"flex py-3 items-center"}>
              <div className={styles.contactCircle}>
                <MailOutlined className={styles.contactIconsSvg} />
              </div>
              <div>
                {/* <div className={styles.contactTextTitle}>Email</div> */}
                <div className={styles.contactText}>Contact@Indispare.com</div>
              </div>
            </div>
            <div className={"flex py-3 items-center"}>
              <div className={styles.contactCircle}>
                <FileTextOutlined className={styles.contactIconsSvg} />
              </div>
              <div>
                {/* <div className={styles.contactTextTitle}>Email</div> */}
                <div className={styles.contactText}>GST 36AAGCI6133F1ZP</div>
              </div>
            </div>
            <div className={"flex py-3"}>
              <div className={styles.contactCircle}>
                <EnvironmentOutlined className={styles.contactIconsSvg} />
              </div>
              <div className={styles.contactText}>

                106,Plot No 32 to 34,  <br /> KTC Illumination, Madhapur,

                <br /> Hyderabad – 500081
              </div>
            </div>

            {/* <div className={"flex py-6"}>
              <Image
                src={"/images/call.svg"}
                preview={false}
                className={styles.contactIcons}
              />
              <div>
                <div className={styles.contactTextTitle}>Helpline Numbers</div>
                <div className={styles.contactText}>+91 7013197359</div>
              </div>
            </div> */}
            {/* <div className={"flex py-6"}>
              <ClockCircleOutlined className={styles.contactIconsSvg} />
              <div>
                <div className={styles.contactTextTitle}>Timings</div>
                <div className={styles.contactTextTime}>
                  Mon to Friday 10 AM to 10 PM
                </div>
              </div>
            </div> */}
          </div>

        </div>
      </div>
      <Footer stateArray={stateArray} />
      <MediaQuery maxWidth={768}>
        <MobileFooter stateArray={stateArray} />
      </MediaQuery>
    </>
  );
};

export default ContactUs;