"use client"

import { useForm } from "react-hook-form"
import PropertyFilter from "../properity-filter/PropertyFilter"

import { useEffect, useState } from "react"
import { useParams, useSearchParams } from "next/navigation"
import { useQuery } from "@tanstack/react-query"
import apiServiceCall from "@/utils/api/shared/apiServiceCall"
import PropertyList from "./PropertyList"

interface LayoutProps {
    locale: string
    slug: string
}
export const defultValues = {
    types: [],
    prices: [0, 10000000],
    sizes: [0, 10000000],
    amenities: [],
    handover_date: null,
    min_bedrooms_count: "Any",
    min_bathrooms_count: "Any",
    has_studio: null,
    has_furnishing: null,
}
export default function PropertiesHome({ locale, slug }: LayoutProps) {
    const [properties, setProperties] = useState([])

    const searchParams = useSearchParams()

    const newTypes = searchParams
        .get("types")
        ?.split(",")
        .map((type) => type)
    const newAmenites = searchParams
        .get("amenities")
        ?.split(",")
        .map((aminity) => aminity)

    const updatedParams = new URLSearchParams(searchParams)
    updatedParams.delete("types")
    updatedParams.delete("types")
    updatedParams.delete("amenities")
    updatedParams.delete("max_bedrooms_count")

    newTypes?.map((type) => {
        updatedParams.append("types[]", type)
    })
    newAmenites?.map((aminity) => {
        updatedParams.append("amenities[]", aminity)
    })

    const { data, isLoading, refetch } = useQuery({
        queryKey: ["properties"],
        // queryFn: ()=> apiServiceCall({method:"Get", url: `product?types[]=${searchParams.get('types')}`})
        queryFn: () => apiServiceCall({ method: "Get", url: `product?${updatedParams}`, headers: { lang: locale } }),
    })
    useEffect(() => {
        refetch()
    }, [searchParams, refetch])

   
    

    const formOptions = useForm({
        defaultValues: defultValues,
    })

    return (
        <div className="min-h-[438px] w-full flex flex-col gap-4 justify-center pb-10">
            <PropertyFilter filterType={slug} pageHeader={slug} formOptions={formOptions} locale={locale} />
<PropertyList data={data}  locale={locale} />
        
        </div>
    )
}