"use client";

import MultiStepForm from "@/components/billboards/NewBillboard/MultiStepForm";
import Container from "@/components/elements/Container";
import { useBillboardForm } from "@/contexts/BillboardFormContext";
import useAxios from "@/hooks/useAxios";
import { IAdvertising } from "@/types/types";
import React, { useEffect, useState } from "react";

interface IEditProps {
  params: Promise<{ id: string; username: string }>;
}

export default function EditBillboardWrapper({ params }: IEditProps) {
  const { request } = useAxios();
  const { updateForm, setIsEditing } = useBillboardForm(); // گرفتن تابع آپدیت فرم

  const resolvedParams = React.use(params);
  const { id } = resolvedParams;
  const [fetched, setFetched] = useState<boolean>(false);
  useEffect(() => {
    setIsEditing(true); // ✅ اعلام اینکه در حال ویرایش هستیم

    const fetchAd = async () => {
      if (!id) return;
      const response = await request<{ advertising: IAdvertising }>(
        "GET",
        `/advertising/get/web/${id}`
      );

      if (response?.advertising) {
        const res = response.advertising;
        updateForm({
          stateId: String(res.province?.id) || "",
          cityId: String(res.city?.id) || "",
          categoryId: res.category || "",
          adsTitle: res.title || "",
          description: res.description || "",
          neighbourhood: res.neighbourhood || "",
          address: res.address || "",
          markerCoordinate: res.lat && res.lng ? [res.lat, res.lng] : [],
          images: res.images || [],
          services: res.services || [],
          selectedFeatures: res.features || [],
          landline: res.contactInfo?.phone || "",
          mobile: res?.contactInfo?.mobile || "",
          telegram: res?.contactInfo?.telegramLink || "",
          whatsapp: res?.contactInfo?.whatsappNumber || "",
          instagram: res?.contactInfo?.instagramLink || "",
          saveData: res?.contactInfo?.saveInfoForNextAds || false,
          selectedType: res.type || "",
          showDiscount: res.showDiscount || false,
          _id: res._id || "",
        });
        setFetched(true);
      }
    };

    fetchAd();
  }, [id]);

  return (
    <Container>
      {fetched && <MultiStepForm />}
      <div></div>
    </Container>
  );
}
