import Nav from 'react-bootstrap/Nav';
import { Link } from "react-router-dom";
import Navbar from 'react-bootstrap/Navbar';
import { Button, Col, Container, Form, Image, Modal, Row, Stack, Tab, Tabs, ListGroupItem, ListGroup, Alert } from "react-bootstrap"
import { useState } from 'react';
import ReCAPTCHA from "react-google-recaptcha";

interface FormValues {
  name: string;
  email: string;
  phoneNumber: string;
  service: string;
  requirements: string;
  captchaToken: string | null;
}

const Header = () => {

  const [show, seShow] = useState(false);
  const [loading, setLoading] = useState(false);
  const [hiredeveloperform, sethiredeveloperform] = useState<FormValues>({
    name: "",
    email: "",
    phoneNumber: "",
    service: "",
    requirements: "",
    captchaToken: null
  });
      
    const [errors, seterrors] = useState<FormValues>({
        name: "",
        email: "",
        phoneNumber: "",
        service: "",
        requirements: "",
        captchaToken: null
    });

    const handleCaptchaChange = (token: string | null) => {
      sethiredeveloperform((prevFormData) => ({
        ...prevFormData,
        captchaToken: token,
      }));
      seterrors((prevErrors) => ({
        ...prevErrors,
        captchaToken: null, // Clear the error
      }));
      setResponse(null);
    };

    const [response, setResponse] = useState<{ status: string; message: string } | null>(null);
    
    const handleShow = () => {
        seShow(true)
    }

    const handleClose = () => {
        seShow(false);
        sethiredeveloperform({
          name: "",
          email: "",
          phoneNumber: "",
          service: "",
          requirements: "",
          captchaToken: null
        });
        seterrors({
          name: "",
          email: "",
          phoneNumber: "",
          service: "",
          requirements: "",
          captchaToken: null
        })
    }

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        const { name, value } = e.target;
        let updatedValue = value.replace(/<[^>]*>/g, "");
  
        if (name === "name") {
          updatedValue = updatedValue.replace(/[0-9]/g, "");
        }
      
        if (name === "phoneNumber") {
          updatedValue = updatedValue.replace(/[^\d+]/g, "");
        }
        sethiredeveloperform({ ...hiredeveloperform, [name]: updatedValue });
        seterrors((prev) => ({ ...prev, [name]: "" }));
      };
    
    const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        seterrors((prev: any) => ({
          ...prev,
          [e.target.name]: '',
        }));
    };

    const handleHireDeveloperForm = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const newErrors: typeof errors = { name: "", email: "", phoneNumber: "", service: "", requirements: "", captchaToken: "" };
    
        sethiredeveloperform((prev) => ({
          ...prev,
            name: prev.name.trim(),
            email: prev.email.trim(),
            phoneNumber: prev.phoneNumber.trim(),
            service: prev.service.trim(),
            requirements: prev.requirements.trim(),
        }))
    
        if (!hiredeveloperform.name.trim()) {
          newErrors.name = "Please Enter Your Name";
        }
    
        if(!hiredeveloperform.email.trim()){
          newErrors.email = 'Please Enter Your Email'
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(hiredeveloperform.email)) {
          newErrors.email = "Please enter a valid email address";
        }
    
        if (!hiredeveloperform.phoneNumber.trim()) {
          newErrors.phoneNumber = "Please Enter your Phone Number";
        }
        else if (hiredeveloperform.phoneNumber.length < 10) {
          newErrors.phoneNumber = "Please Enter up to 10 digits";
        }

        if (!hiredeveloperform.service.trim()) {
          newErrors.service = "Please select your service";
        }

        if (!hiredeveloperform.requirements.trim()) {
          newErrors.requirements = "Please enter your requirements";
        }

        if (!hiredeveloperform.captchaToken) {
          newErrors.captchaToken = "Please Validate the Captcha";
        }
    
        seterrors(newErrors);
        if (Object.values(newErrors).some((error) => error)) return;
    
        const formData = new FormData();
        formData.append("name", hiredeveloperform.name);
        formData.append("email", hiredeveloperform.email);
        formData.append("phoneNumber", hiredeveloperform.phoneNumber);
        formData.append("service", hiredeveloperform.service);
        formData.append("requirements", hiredeveloperform.requirements);

        if (hiredeveloperform.captchaToken) {
          formData.append("captcha", hiredeveloperform.captchaToken);
        }
        setLoading(true);
    
        try {
          const response = await fetch(`${process.env.REACT_APP_HIRE_DEVELOPER_API}`, {
            method: "POST",
            body: formData,
          });
          const result = await response.json();
    
          if (result.status === 'true') {
            setResponse(result);
            sethiredeveloperform({
              name: "",
              email: "",
              phoneNumber: "",
              service: "",
              requirements: "",
              captchaToken: null
            });
            setTimeout(() => {
              setResponse(null);
              window.location.reload();
            }, 5000);
            const items = document.querySelectorAll('.form-field .form-label');
            items.forEach((item) => {
              if (item.classList.contains('label-view')) {
                item.classList.remove('label-view');
              }
            });
          } else {
            setResponse(result);
            setTimeout(() => {
              setResponse(null);
            }, 5000)
          }
        } catch (error) {
          setResponse({ status: "false", message: "Something went wrong. Please try again." });
          setTimeout(() => {
            setResponse(null);
          },5000)
        } finally {
          setLoading(false);
        }
    };

    const handlelabel = (event: React.FormEvent<HTMLInputElement>) => {
        const inputElement = event.currentTarget;
        const fieldName = inputElement.getAttribute("name");
        const labelElement = document.querySelector(`label[data-name=${fieldName}]`)
    
        if(labelElement) {
          if(inputElement.value !== "") {
            labelElement.classList.add('label-view')
          } else {
            labelElement.classList.remove('label-view')
        }
      }
    }


  return (
    <>
      <Navbar collapseOnSelect expand="md" className="p-0 menu">
        <Container>
          <Navbar.Brand as={Link} to="/" className="p-0 mx-md-auto">
              <Image src="/images/hire-developer-logo.svg" />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mx-auto">
              <Nav.Link as={Link} to="/" className='p-md-0'>Home</Nav.Link>
              <Nav.Link as={Link} to="/about" className='p-md-0'>About Us</Nav.Link>
              <Nav.Link as={Link} to="/hire-resources" className='p-md-0'>Hire Resources</Nav.Link>
              {/* <Nav.Link as={Link} to="/blog" className='p-md-0'>Blog</Nav.Link> */}
              <Nav.Link as={Link} to="/contact-us" className='p-md-0'>Contact Us</Nav.Link>
            </Nav>
          </Navbar.Collapse>
          <Button className='d-none d-md-flex default-btn-style border-0' onClick={handleShow}>
              Hire Developer
          </Button>
        </Container>
      </Navbar>
      <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false} className="get-in-touch mt-0 mb-0" size="lg" centered>
        <Modal.Header closeButton>
            <Modal.Title>Get In Touch</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form onSubmit={handleHireDeveloperForm} autoComplete="off" className="form-container">
                <Row>
                    <Form.Group as={Col} className="mb-3">
                        <ListGroupItem className={`form-field ${errors.name ? "is-invalid" : ""}`}>
                            <Form.Label>Full Name</Form.Label>
                            <Form.Control
                                type="text"
                                placeholder=""
                                value={hiredeveloperform.name}
                                onChange={handleChange}
                                onInput={handlelabel}
                                name="name"
                                onFocus={handleFocus} autoComplete="off"
                                isInvalid={!!errors.name}
                            />
                        </ListGroupItem>
                        <Form.Control.Feedback type="invalid">{errors.name}</Form.Control.Feedback>
                    </Form.Group>
                    <Form.Group as={Col} className="mb-3">
                        <ListGroupItem className={`form-field ${errors.email ? "is-invalid" : ""}`}>
                            <Form.Label>Email Address</Form.Label>
                            <Form.Control
                                type="text"
                                placeholder=""
                                value={hiredeveloperform.email}
                                onChange={handleChange}
                                name="email"
                                onFocus={handleFocus} onInput={handlelabel} autoComplete="off"
                                isInvalid={!!errors.email}
                            />
                        </ListGroupItem>
                        <Form.Control.Feedback type="invalid">{errors.email}</Form.Control.Feedback>
                    </Form.Group>
                </Row>
                <Row>
                    <Form.Group as={Col} className="mb-3">
                        <ListGroupItem className={`form-field ${errors.phoneNumber ? "is-invalid" : ""}`}>
                            <Form.Label>Phone Number</Form.Label>
                            <Form.Control
                                type="text"
                                placeholder=""
                                value={hiredeveloperform.phoneNumber}
                                onChange={handleChange}
                                name="phoneNumber"
                                onFocus={handleFocus} onInput={handlelabel} autoComplete="off"
                                isInvalid={!!errors.phoneNumber}
                            />
                        </ListGroupItem>
                        <Form.Control.Feedback type="invalid">{errors.phoneNumber}</Form.Control.Feedback>
                    </Form.Group>
                </Row>
                <Row>
                    <Form.Group as={Col} md="12" className="mb-3">
                        <ListGroupItem className={`form-field ${errors.service ? "is-invalid" : ""}`}>
                            <Form.Label>Select Your Service</Form.Label>
                            <Form.Select defaultValue="Choose..." name="service" value={hiredeveloperform.service} onChange={handleChange} onFocus={handleFocus} isInvalid={!!errors.service}>
                                <option value="">Please Select from the dropdown</option>
                                <option value="Php Developers">Php Developers</option>
                                <option value="React Js Developers">React Js Developers</option>
                                <option value="Angular Js Developers">Angular Js Developers</option>
                                <option value="Node Js Developers">Node Js Developers</option>
                                <option value="Laravel Developers">Laravel Developers</option>
                                <option value="Android Developers">Android Developers</option>
                                <option value="Magento Developers">Magento Developers</option>
                                <option value="Wordpress Developers">Wordpress Developers</option>
                                <option value="Other">Other</option>
                            </Form.Select>
                        </ListGroupItem>
                        <Form.Control.Feedback type="invalid">{errors.service}</Form.Control.Feedback>
                    </Form.Group>
                    <Form.Group as={Col} className="mb-3">
                        <ListGroupItem className={`form-field ${errors.requirements ? "is-invalid" : ""}`}>
                            <Form.Label>Describe Your Requirements</Form.Label>
                            <Form.Control
                                type="text"
                                as="textarea"
                                placeholder=""
                                value={hiredeveloperform.requirements}
                                onChange={handleChange}
                                name="requirements"
                                onFocus={handleFocus} onInput={handlelabel} autoComplete="off"
                                isInvalid={!!errors.requirements}
                            />
                        </ListGroupItem>
                        <Form.Control.Feedback type="invalid">{errors.requirements}</Form.Control.Feedback>
                    </Form.Group>
                    <Form.Group className="captcha mb-3">
                      <ListGroup.Item className={`form-field ${errors.captchaToken ? "is-invalid" : ""}`}>
                        <ReCAPTCHA
                                sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY!}
                                onChange={handleCaptchaChange}
                        />
                      </ListGroup.Item>
                      {errors.captchaToken ? (
                        <Form.Control.Feedback type="invalid">
                          {errors.captchaToken}
                        </Form.Control.Feedback>
                      ) : null}
                    </Form.Group>
                </Row>
                <Button variant="primary" type="submit" className={`btn btn-primary default-btn-style border-0 ${loading ? "loading" : ""}`}>
                    {loading ? "Submitting..." : "Send Query"}
                    <span></span>
                </Button>
                {response && (
                  response.status === "true" ? (
                    <Alert variant="success" className="mt-3 mb-0">
                      {response.message}
                    </Alert>
                  ) : (
                    <Alert variant="danger" className="mt-3 mb-0">
                      {response.message}
                    </Alert>
                  )
                )}
            </Form>
        </Modal.Body>
    </Modal>
    </>
  );
}

export default Header;