// @ts-nocheck

"use client"
import React from "react"
import { useForm, Controller } from "react-hook-form"
import Button from "../shared/reusableComponents/Reusablebutton"
import InputComponent from "../shared/reusableComponents/InputComponent"
import CustomTextAria from "../shared/reusableComponents/CustomTextAria"
import Image from "next/image"
import PhoneValidationExample from "../shared/PhoneInput"
import { Icon } from "@iconify/react"
import Link from "next/link"
import { getHomeSocialData } from "@/lib/serverActions"
import { useMutation, useQuery } from "@tanstack/react-query"
import apiServiceCall from "@/utils/api/shared/apiServiceCall"
import Container from "../shared/container"
import { HeaderWrwpper } from "../shared/main-header"
import axios from "axios"
import { useTranslations } from "next-intl"


const GetInTouchSection = ({ locale }) => {
    const t = useTranslations("Header") // استخدم useTranslations للـ client side

    const { data } = useQuery({
        queryKey: ["setting/social"],
        queryFn: () => apiServiceCall({ url: "setting/social", headers: { lang: locale } }),
    })
    const { data: touchdata } = useQuery({
        queryKey: ["touch"],
        queryFn: () => apiServiceCall({ url: "touch", headers: { lang: locale } }),
    })
    // const data= useQuery({ key: 'setting/social',fn:apiServiceCall({url:'setting/social'})})


    const { mutate, isError, isSuccess, isPending } = useMutation({
        mutationFn: (data) => apiServiceCall({ url: "contacts", body: data, method: "POST" }),

       
        
        
    })

    const {
        register,
        handleSubmit,
        control,

        formState: { errors },
    } = useForm()

   

    const contactData = {
        mail: {
            name: "Email",
            value: data?.data?.data?.contacts?.email,
            iconName: "mynaui:envelope",
        },
        phone: {
            name: "Phone",
            value: data?.data?.data?.contacts?.phone,
            iconName: "basil:phone-outline",
        },
        location: {
            name: "Address",
            value: data?.data?.data?.address,
            iconName: "proicons:location",
        },
        whatsapp: {
            name: "Whatsapp",
            value: data?.data?.data?.contacts?.whatsapp,
            iconName: "hugeicons:whatsapp",
        },
    }

    const onSubmit = (data) => {
        
        mutate(data)
        
    }

    return (
        <HeaderWrwpper
            className="!h-[1100px] sm:!h-[1050px] md:!h-[1000px] lg:!h-[700px]  !flex !items-center !justify-center"
            imgUrl={data?.data?.headerByImage?.image?.original_url}
        >
            <form
                onSubmit={handleSubmit(onSubmit)}
                className="bg-white-50 rounded-lg space-y-4 col-span-12 lg:col-span-7 md:order-2 lg:order-1 px-5 py-5 max-md:order-2 text-sm md:text-base h-full flex items-center justify-center"

                
            >
                <Container>
                    <div className="flex w-full flex-col lg:flex-row gap-5 items-center">
                        <div className="w-full lg:w-[60%] bg-transparent rounded-lg lg:p-5 text-white">
                            <div className="h-full flex flex-col justify-between">
                                <div>
                                    <div className="mb-8">
                                        <h2 className="text-4xl mb-5">{data?.data?.header?.title}</h2>
                                        <p className="text-xl font-light mb-5 lg:max-w-[650px]">{data?.data?.header?.description}</p>
                                    </div>

                                    <div className="flex items-center gap-3 mb-6">
                                        <div className="flex items-center justify-center rounded-lg">
                                            <Icon className="text-white text-2xl" icon={contactData.mail.iconName} />
                                        </div>

                                        <p className="w-full text-dark-blue-400 text-base font-light">
                                            {contactData.mail.value}
                                        </p>
                                    </div>

                                    {/* <div className="flex items-center gap-3 mb-6">
                                        <div className="flex items-center justify-center rounded-lg">
                                            <Icon
                                                className="text-white text-2xl"
                                                icon={contactData.location.iconName}
                                            />
                                        </div>

                                        <p className="text-dark-blue-400 text-base font-light">
                                            {contactData.location.value}
                                        </p>
                                    </div> */}

                                    {/* <div className="flex items-center gap-3 mb-6">
                                        <div className="flex items-center justify-center rounded-lg">
                                            <Icon className="text-white text-2xl" icon={contactData.phone.iconName} />
                                        </div>

                                        <p className="text-dark-blue-400 text-base font-light">
                                            {contactData.phone.value}
                                        </p>
                                    </div> */}

                                    <div className="flex items-center gap-3 mb-6">
                                        <div className="flex items-center justify-center rounded-lg">
                                            <Icon
                                                className="text-white text-2xl"
                                                icon={contactData.whatsapp.iconName}
                                            />
                                        </div>

                                        <p className="text-dark-blue-400 text-base font-light">
                                            {contactData.whatsapp.value}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="w-full lg:w-[40%] border border-gray-300 bg-white rounded-lg py-8 px-6" data-aos="zoom-in"
                data-aos-delay={ 100}
                data-aos-duration="800">
                            <h2 className="text-2xl mb-5 text-black">{t('Register your interests')}</h2>
                            <p className="font-light mb-5 text-[#6B665F]">{t("tell us about your interests and ideas")}</p>

                            <div className="flex  gap-4">
                                <InputComponent
                                    className="[&_input]:bg-bodyBg [&_input]:!border-0 w-full"
                                    type="text"
                                    placeholder={t('fullName')}
                                    required
                                    {...register("name", { required: "Full name is required" })}
                                />
                                {errors.fullName && (
                                    <p className="text-red-500 text-sm mt-1">{errors.fullName.message}</p>
                                )}
                            </div>


                            <InputComponent
                                className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
                                type="email"
                                placeholder={t('your email')}
                                required
                                {...register("email", { required: "Email is required" })}
                            />
                            {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>}

                            {/* <PhoneValidationExample className="mt-5" label="Phone Number" /> */}

                            {/* Use Controller for PhoneValidationExample */}
                            <Controller
                                name="phone"
                                control={control}
                                defaultValue=""
                                rules={{ required: "Phone number is required" }}
                                render={({ field }) => (
                                    <PhoneValidationExample
                                        onChange={field.onChange}
                                        className="mt-5 [&_.phone-input-wrapper]:!bg-bodyBg [&_input]:!bg-bodyBg [&_.phone-input-wrapper]:!p-0 [&_.phone-input-wrapper]:!pl-3 [&_.phone-input-wrapper]:!gap-2 [&_input]:!p-4 [&_input]:!pl-0 [&_.phone-input-wrapper]:!border-0"
                                        label=""
                                        value={field.value}
                                    />
                                )}
                            />
                            {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone.message}</p>}

                            <CustomTextAria
                                className="mt-5 [&_textarea]:bg-bodyBg [&_textarea]:!border-0"
                                placeholder={t("Your Message")}
                                required
                                {...register("message", { required: "Message is required" })}
                            />
                            {errors.message && <p className="text-red-500 text-sm mt-1">{errors.message.message}</p>}
                            {isError && (
                                <p className="text-red-500 text-sm mt-1">{"something went round please try again"}</p>
                            )}
                            {isSuccess && <p className="text-green-500 text-sm mt-1">{"sent success"}</p>}

                            <Button className="mt-5" type="submit" styleMe>
                                {t("send")}
                            </Button>
                        </div>
                    </div>
                </Container>
            </form>
        </HeaderWrwpper>
    )
}

export default GetInTouchSection