import React, { useState, useRef } from "react";
import { Button, Col, Container, Form, Image, Modal, Row, Stack, Tab, Tabs, ListGroupItem } from "react-bootstrap"
import ReCAPTCHA from "react-google-recaptcha";
import { Link } from "react-router-dom";

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

const DreamTeam = () => {
    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 (
        <Stack className="dream-team-bg">
            <Container>
                <Row>
                    <Col md="12">
                        <h2 className="text-center text-white">
                            Our Diverse <span>Technology Competency</span>
                        </h2>
                        <p className="text-center text-white">
                            Your tech stack. We have it covered. Access a talent pool of expert Indian developers with specialized skills in the technologies and roles that matter most to your business. We ensure you have the right expertise to build innovative, high-performing software solutions.
                        </p>
                        <Tabs
                            defaultActiveKey="hire-developers-by-role"
                            id="justify-tab-example"
                            justify
                        >
                            <Tab eventKey="hire-developers-by-role" title="Hire Developers by Role">
                                <Stack className="flex-row hire-developers-teams flex-wrap">
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-frontend-developers">
                                            <Image src="/images/hire-front-end.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Front-end <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-backend-developers">
                                            <Image src="/images/hire-backendend-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Back-end <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-mobile-app-developers">
                                            <Image src="/images/hire-mobile-app.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Mobile App <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-qa-developers">
                                            <Image src="/images/hire-quality-assurance.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Quality <br/>Assurance Team</span>
                                        </Link>
                                    </Stack>
                                    {/* <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-rpa.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire RPA <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-automate.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Power Automate <br/>Developers</span>
                                        </Link>
                                    </Stack> */}
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-fullstack-developers">
                                            <Image src="/images/hire-full-stack.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Full-Stack <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    {/* <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-ai-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire AI <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-ml-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire ML <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-pwa-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire PWA <br/>Developers</span>
                                        </Link>
                                    </Stack> */}
                                </Stack>
                            </Tab>
                            <Tab eventKey="hire-developers-by-skill" title="Hire Developers by Skill">
                            <Stack className="flex-row hire-developers-teams flex-wrap">
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-angular-js">
                                            <Image src="/images/hire-angular-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire AngularJS <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-reactjs-developers">
                                            <Image src="/images/hire-react-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire ReactJS <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    {/* <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-nextjs-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire NextJS <br/>Developers</span>
                                        </Link>
                                    </Stack> */}
                                    {/* <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-vue-js-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire VueJS <br/>Assurance Team</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-dotnet-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire .Net <br/>Developers</span>
                                        </Link>
                                    </Stack> */}
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-nodejs-developers">
                                            <Image src="/images/hire-nodejs-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire NodeJS <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-php-developers">
                                            <Image src="/images/hire-php-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire PHP <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-laravel-developers">
                                            <Image src="/images/hire-laravel-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Laravel <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    <Stack className=" hire-developers-teams-list">
                                        <Link to="/hire-android-developers">
                                            <Image src="/images/hire-android-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire Android <br/>Developers</span>
                                        </Link>
                                    </Stack>
                                    {/* <Stack className=" hire-developers-teams-list">
                                        <Link to="">
                                            <Image src="/images/hire-mernstack-developer.svg" alt="Hire Frontend" className="img-fluid" />
                                            <span>Hire MEAN <br/>Developers</span>
                                        </Link>
                                    </Stack> */}
                                </Stack>
                            </Tab>
                        </Tabs>
                        <Button className="mx-auto d-block default-btn-style border-0" onClick={handleShow}>
                            Hire Software Developers
                        </Button>
                    </Col>
                </Row>
            </Container>
            <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="Enter Your Phone Number"
                                        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="">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="Describe Your Requirements"
                                        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">
                                <ListGroupItem className={`form-field ${errors.captchaToken ? "is-invalid" : ""}`}>
                                    <ReCAPTCHA
                                            sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY!}
                                            onChange={handleCaptchaChange}
                                    />
                                </ListGroupItem>
                                {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>
                    </Form>
                </Modal.Body>
            </Modal>
        </Stack>
    )
}

export default DreamTeam;