import React, { useEffect, useState } from "react";
import "./Contact_us_Form.css";
import { Col, Form, Row } from "react-bootstrap";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { useForm, Controller } from "react-hook-form";
import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faEnvelope,
  faLocationDot,
  faMapLocationDot,
  faPhone,
} from "@fortawesome/free-solid-svg-icons";
import Success_Modal from "../../common-components/common_modal/success_modal/Success_Modal";
import { useDispatch, useSelector } from "react-redux";
import { contactusForm } from "../../../features/contact_us/contactusSlice";
import { appSetup } from "../../../features/master/masterSlice";
import MapView from "./map";
import Green_btn from "../../common-components/common_btn/green_btn/Green_btn";
import { FullScreen, useFullScreenHandle } from "react-full-screen";

function Contact_us_Form() {
  const dispatch = useDispatch();

  const [showSuccessModal, setShowSucsessModal] = useState(false);
  const handle = useFullScreenHandle();

  const {
    control,
    reset,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const app_setup = useSelector((state) => state.master.app_setup);

  useEffect(() => {
    dispatch(appSetup());
  }, [dispatch]);

  const expandMap = () => {
    if (handle.active) {
      handle.exit();
    } else {
      handle.enter();
    }
  };

  const scrollToMap = () => {
    document.getElementById("contact-map-section")?.scrollIntoView({
      behavior: "smooth",
      block: "start",
    });
  };

  const onSubmit = (data) => {
    dispatch(contactusForm(data));
    setShowSucsessModal(true);
    reset();
  };

  return (
    <section className="Contact_us_Form">
      <div className="container">
        <div className="contact_heading">
          <h2>Get In Touch</h2>
          <p>We would love to hear from you and your pet.</p>
        </div>

        <div className="contact_box ">
          <Row className="g-0">
            <Col md={7} sm={12}>
              <div className="contact_form">
                {!showSuccessModal ? (
                  <>
                    <h3>Send Us a Message</h3>
                    <p className="form_subtitle">
                      Fill in the details below and our team will get back to
                      you.
                    </p>

                    <Form>
                      <Form.Group className="mb-3">
                        <Form.Control
                          type="text"
                          placeholder="Your Name"
                          {...register("name", {
                            required: "Name is required",
                          })}
                          className={classNames({
                            "is-invalid": errors?.name,
                          })}
                          onKeyDown={(event) => {
                            if (
                              !/[A-Za-z ]/.test(event.key) &&
                              event.key !== "Backspace"
                            ) {
                              event.preventDefault();
                            }
                          }}
                        />
                        {errors.name && (
                          <div className="invalid-feedback">
                            {errors.name.message}
                          </div>
                        )}
                      </Form.Group>

                      <Form.Group className="mb-3">
                        <Form.Control
                          type="email"
                          placeholder="E-mail Address"
                          {...register("email", {
                            required: "Email Id required",
                            pattern: {
                              value:
                                /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
                              message: "Email Id Invalid",
                            },
                          })}
                          className={classNames({
                            "is-invalid": errors?.email,
                          })}
                        />
                        {errors.email && (
                          <div className="invalid-feedback">
                            {errors.email.message}
                          </div>
                        )}
                      </Form.Group>

                      <Controller
                        name="number"
                        control={control}
                        defaultValue=""
                        rules={{
                          required: "Mobile number is required",
                        }}
                        render={({ field: { onChange, value } }) => (
                          <PhoneInput
                            country="in"
                            value={value}
                            placeholder="Enter Mobile Number"
                            onChange={onChange}
                            containerClass="contact_phone"
                            inputClass={classNames({
                              "is-invalid": errors?.number,
                            })}
                            inputProps={{
                              name: "number",
                              required: true,
                            }}
                          />
                        )}
                      />

                      {errors.number && (
                        <div className="invalid-feedback d-block">
                          {errors.number.message}
                        </div>
                      )}

                      <Form.Group className="mt-3">
                        <Form.Control
                          as="textarea"
                          rows={4}
                          placeholder="Your Message"
                          {...register("message", {
                            required: "Message required",
                          })}
                          className={classNames({
                            "is-invalid": errors?.message,
                          })}
                        />
                        {errors.message && (
                          <div className="invalid-feedback">
                            {errors.message.message}
                          </div>
                        )}
                      </Form.Group>
                    </Form>

                    <div className="contact_submit">
                      <Green_btn
                        btnText="Submit"
                        onClick={handleSubmit(onSubmit)}
                      />
                    </div>
                  </>
                ) : (
                  <Success_Modal
                    show={showSuccessModal}
                    onHide={() => setShowSucsessModal(false)}
                    successText="Enquiry Sent Successfully!"
                  />
                )}
              </div>
            </Col>

            <Col md={5} sm={12}>
              <div className="contact_info">
                <h3>Contact Information</h3>
                <p className="info_text">
                  Have a question about our pet care services? Contact us
                  anytime.
                </p>

                <div className="contact_item">
                  <div className="contact_icon">
                    <FontAwesomeIcon icon={faPhone} />
                  </div>
                  <a href={`tel:${app_setup?.contact_no}`}>
                    {app_setup?.contact_no}
                  </a>
                </div>

                <div className="contact_item">
                  <div className="contact_icon">
                    <FontAwesomeIcon icon={faEnvelope} />
                  </div>
                  <a href={`mailto:${app_setup?.email}`}>{app_setup?.email}</a>
                </div>

                <div className="contact_item">
                  <div className="contact_icon">
                    <FontAwesomeIcon icon={faLocationDot} />
                  </div>
                  <p>{app_setup?.address}</p>
                </div>

                <button
                  type="button"
                  className="map_button"
                  onClick={scrollToMap}
                >
                  <FontAwesomeIcon icon={faMapLocationDot} />
                  Find Us on Map
                </button>
              </div>
            </Col>
          </Row>
        </div>

        <div id="contact-map-section" className="contact_map_section">
          <MapView
            lat={app_setup?.lat}
            lng={app_setup?.long}
            handle={handle}
            expandMap={expandMap}
            toggleMap={scrollToMap}
          />
        </div>
      </div>
    </section>
  );
}

export default Contact_us_Form;
