'use client' 

import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";

import Form from '@components/Form';

const EditProduct= () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const ProductId = searchParams.get('id');


  const [Submitting, setSubmitting] = useState(false);
  const [Post, setPost] = useState({
      User_ID: '',
      NOP: '',
      type: '', 
      image : '',
      desc: '',
      price: '',
  });

  useEffect(() => {
    const getProductDetails = async () =>{
      const res = await fetch(`/api/product/${ProductId}`);
      const data = await res.json();
      setPost({
        NOP: data[2],
        type: data[3],
        image: data[4],
        desc: data[5],
        price: data[6],
      })
    }
        
    if(ProductId){
      getProductDetails();
    } 
  },[ProductId])

  const UpdateProduct = async (e) => {
    e.preventDefault();
    setSubmitting(true);

    if(!ProductId) return alert('ProductId not found')

    try{
      const res = await fetch(`/api/product/${ProductId}`,
        {
          method: 'PATCH',
          body: JSON.stringify({
            NOP: Post.NOP,
            type: Post.type,
            image: Post.image,
            desc: Post.desc,
            price: Post.price,
          })
        });
      if(res.ok){
        router.push('/')
      }

    }catch(error){
      console.log(error);
    }finally{
      setSubmitting(false);
    }
  } 

  return (
    <Form 
        type = 'Edit'
        Post = {Post}
        setPost = {setPost}
        Submitting ={Submitting}
        handleSubmit = {UpdateProduct}

    />
  )
}

export default EditProduct;