import { use, useState } from "react";
import { Button, Col, Container, Form, InputGroup, Row, Stack } from "react-bootstrap"
import ReCAPTCHA from "react-google-recaptcha";
import { Link } from "react-router-dom"

interface WorkInquiryFormType {
    username: string,
    email: string,
    phone: string,
    message: string,
    captcha: string | null
}

const WorkEnquiry = () => {
    const [workInquiryForm, setworkInquiryForm] = useState<WorkInquiryFormType>({
        username: "",
        email: "",
        phone: "",
        message: "",
        captcha: null
    });
    const [errors, seterrors] = useState<Partial<WorkInquiryFormType>>({});

    
    const handleworkInquiryFormField = (e: React.ChangeEvent<HTMLInputElement>) => {
        const {name, value} = e.target;

        if(name == "phone") {
            const numbericvalue = value.replace(/\D/g, "");
            setworkInquiryForm((prev) => {
                return {
                    ...prev,
                    [name] : numbericvalue
                }
            })
        } else {
            setworkInquiryForm((prev) => {
                return {
                    ...prev,
                    [name] : value
                }
            })
        }
        seterrors((prev) => {
            return {
                ...prev,
                [name]: ''
            }
        });
    }

    const handleCaptchaChange = (token: string | null) => {
        setworkInquiryForm((prev) => {
            return {
                ...prev,
                captcha: token
            }
        })
        seterrors((prev) => {
            return {
                ...prev,
                captcha: ''
            }
        });
    }
    
    const isValidEmail = (email: string) => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    };

    const handleworkInquiryForm = async (e: React.FormEvent) => {
        e.preventDefault();
        
        const newErrors: Partial<WorkInquiryFormType> = {};

        if(workInquiryForm.username.trim() == '') {
            newErrors.username = "Please Enter your Name"
        }

        if(workInquiryForm.email.trim() == '') {
            newErrors.email = "Please Enter your Email"
        } else if(!isValidEmail(workInquiryForm.email)){
            newErrors.email = "Please enter a valid email address"
        }

        if(workInquiryForm.phone.trim() == '') {
            newErrors.phone = "Please Enter your Phone Number"
        } else if(workInquiryForm.phone.length < 10) {
            newErrors.phone = "Please Enter up to 10 digits"
        }

        if(workInquiryForm.message.trim() == '') {
            newErrors.message = "Please Enter your Message"
        }

        if(workInquiryForm.captcha  == null) {
            newErrors.captcha = "Please Validate the Captcha"
        }
        if(Object.keys(newErrors).length > 0) {
            seterrors(newErrors);
            return
        }
       
        seterrors({})


        try {

            const apiurl = process.env.REACT_APP_WORK_ENQUIRY_API;
            if(!apiurl) {
                return;
            }

            const response = await fetch(apiurl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(workInquiryForm)
            });

            const responseJson = await response.json();
            console.log('responseJson', responseJson);

            if(responseJson.status == true) {
                setworkInquiryForm({
                    username: "",
                    email: "",
                    phone: "",
                    message: "",
                    captcha: null
                })
            }
            
        } 
        catch(error) {
            console.log(error)
        }
    }

    


    return (
        <Stack className="work-enquirybg">
            <Container>
                <Row>
                    <Col sm="6">
                        <h2 className="section-title">Work <span>Inquiry</span></h2>
                        <p className="section-subtitle">Let’s Work For your Next Projects ?</p>
                        <Stack className="work-enquiry-contact flex-wrap flex-row text-white">
                            <Stack className="work-enquiry-contact-phone work-enquiry-contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                                    <g clip-path="url(#clip0_54631_1585)">
                                    <path d="M17.5583 5.83317C18.6979 6.0555 19.7451 6.6128 20.5661 7.43376C21.387 8.25472 21.9443 9.30198 22.1667 10.4415M17.5583 1.1665C19.9258 1.42951 22.1335 2.48971 23.819 4.17301C25.5044 5.85632 26.5673 8.06268 26.8333 10.4298M25.6667 19.7398V23.2398C25.668 23.5648 25.6014 23.8864 25.4713 24.1841C25.3411 24.4818 25.1502 24.749 24.9108 24.9687C24.6713 25.1883 24.3887 25.3556 24.0809 25.4597C23.7731 25.5638 23.4469 25.6024 23.1233 25.5732C19.5333 25.1831 16.0848 23.9563 13.055 21.9915C10.2361 20.2003 7.84623 17.8104 6.055 14.9915C4.08331 11.9479 2.85629 8.48266 2.47334 4.8765C2.44418 4.55388 2.48252 4.22872 2.58592 3.92173C2.68932 3.61474 2.8555 3.33264 3.0739 3.0934C3.29229 2.85415 3.55811 2.663 3.85443 2.53211C4.15074 2.40123 4.47107 2.33348 4.795 2.33317H8.295C8.86119 2.3276 9.41009 2.5281 9.83939 2.89729C10.2687 3.26649 10.5491 3.77919 10.6283 4.33984C10.7761 5.45991 11.05 6.55969 11.445 7.61817C11.602 8.03575 11.6359 8.48957 11.5429 8.92586C11.4498 9.36216 11.2337 9.76263 10.92 10.0798L9.43834 11.5615C11.0992 14.4823 13.5175 16.9007 16.4383 18.5615L17.92 17.0798C18.2372 16.7662 18.6377 16.55 19.074 16.4569C19.5103 16.3639 19.9641 16.3979 20.3817 16.5548C21.4402 16.9498 22.5399 17.2238 23.66 17.3715C24.2267 17.4515 24.7443 17.7369 25.1143 18.1736C25.4843 18.6103 25.6809 19.1677 25.6667 19.7398Z" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_54631_1585">
                                        <rect width="28" height="28" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg>
                            </Stack>
                            <Stack className="work-enquiry-contact-info">
                                <span>Call For Inquiry</span>
                                <Link to="tel:(+91) - 8153091948">
                                    (+91) - 8153091948
                                </Link>
                            </Stack>
                        </Stack>
                        <Stack className="work-enquiry-contact flex-wrap flex-row text-white">
                            <Stack className="work-enquiry-contact-email work-enquiry-contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                                    <path d="M4.66665 23.3332C4.02498 23.3332 3.47567 23.1047 3.01873 22.6478C2.56179 22.1908 2.33331 21.6415 2.33331 20.9998V6.99984C2.33331 6.35817 2.56179 5.80887 3.01873 5.35192C3.47567 4.89498 4.02498 4.6665 4.66665 4.6665H23.3333C23.975 4.6665 24.5243 4.89498 24.9812 5.35192C25.4382 5.80887 25.6666 6.35817 25.6666 6.99984V20.9998C25.6666 21.6415 25.4382 22.1908 24.9812 22.6478C24.5243 23.1047 23.975 23.3332 23.3333 23.3332H4.66665ZM14 15.1665L4.66665 9.33317V20.9998H23.3333V9.33317L14 15.1665ZM14 12.8332L23.3333 6.99984H4.66665L14 12.8332ZM4.66665 9.33317V6.99984V20.9998V9.33317Z" fill="white"/>
                                </svg>
                            </Stack>
                            <Stack className="work-enquiry-contact-info">
                                <span>Send Us Email</span>
                                <Link to="mailto:sales@webiletechnologies.com">
                                    sales@webiletechnologies.com
                                </Link>
                            </Stack>
                        </Stack>
                    </Col>
                    <Col sm="6">
                        <Stack className="quiry-form-bg">
                            <label className="text-center">Need Help For Project!</label>
                            <p className="section-subtitle text-center">We are ready to help your next projects, let’s work together</p>
                            <Form onSubmit={handleworkInquiryForm}>
                                <Form.Group className="form-field">
                                    <Form.Control type="text" placeholder="Name" value={workInquiryForm.username} name="username" onChange={handleworkInquiryFormField} isInvalid={!!errors.username} />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.username}
                                    </Form.Control.Feedback>

                                </Form.Group>
                                <Form.Group className="form-field">
                                    <Form.Control type="email" placeholder="Email" name="email" value={workInquiryForm.email} onChange={handleworkInquiryFormField}  isInvalid={!!errors.email} />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.email}
                                    </Form.Control.Feedback>
                                </Form.Group>
                                <Form.Group className="form-field">
                                    <Form.Control type="tel" placeholder="Phone Number" name="phone" value={workInquiryForm.phone} onChange={handleworkInquiryFormField} isInvalid={!!errors.phone} maxLength={10}/>
                                    <Form.Control.Feedback type="invalid">
                                        {errors.phone}
                                    </Form.Control.Feedback>
                                </Form.Group>
                                <Form.Group className="form-field">
                                    <Form.Control as="textarea" placeholder="Message" name="message" className="messge" value={workInquiryForm.message} onChange={handleworkInquiryFormField} isInvalid={!!errors.message}/>
                                    <Form.Control.Feedback type="invalid">
                                        {errors.message}
                                    </Form.Control.Feedback>
                                </Form.Group>
                                <Form.Group className="form-field">
                                    <ReCAPTCHA
                                            sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY!}
                                            onChange={handleCaptchaChange} className={` ${errors.captcha  ? "is-invalid" : ""}`}
                                            
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.captcha}
                                    </Form.Control.Feedback>
                                </Form.Group>
                                <Button type="submit" className="btn btn-primary default-btn-style border-0">Submit</Button>
                            </Form>
                        </Stack>
                    </Col>
                </Row>
            </Container>
        </Stack>
    )
}

export default WorkEnquiry