"use client";

import Container from "@/components/elements/Container";
import MultiStepForm from "@/components/projects/NewProject/MultiStepForm";
import { useProjectForm } from "@/contexts/ProjectFormContext";
import useAxios from "@/hooks/useAxios";
import { Project } from "@/types/types";
import React, { useEffect, useState } from "react";

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

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

  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<{ project: Project }>(
        "GET",
        `/projects/get/web/${id}`
      );

      if (response?.project) {
        const res = response.project;
        updateForm({
          stateId: String(res.province?.id) || "",
          cityId: String(res.city?.id) || "",
          description: res.description || "",
          selectedType: res.project_type || "",
          expertise: res.expertise || null,
          subExpertise: res?.sub_expertise || [],
          gender: res.gender || "",
          age: res.age || "",
          publicType: String(res.conversation_projects) || "",
          projTitle: res.title || "",
          projectTime: res.offer_time || "",
          offerPrice: String(res?.offer_price) || "",
          numberOfPerson: res.numberOfPerson || "",
          _id: res._id || "",
        });
        setFetched(true);
      }
    };

    fetchAd();
  }, [id]);

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