import { languageObject } from '../../Components/Utils/languageObject';
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Similar from "./Similar";
import { Spin } from "antd";
import HeaderLink from "../../Components/Ui/HeaderLink";
import ProductInfo from '../../Components/Products/ProductInfo';
import DistributorWord from '../../Components/Ui/DistributorWord';
import Contact from '../../Components/contact/Contact';
import { useGetOneProduct } from '../../api/products';
import SingleProductSwiper from '../../Components/Products/SingleProductSwiper';



const Page = () => {
  const {data} = useGetOneProduct();  
  const product = data?.data

  const [t] = useTranslation();
  const isLoading = false
  
  const ProductParamsArray = product?.params 
  ? Object.entries(product.params).map(([key, value]) => ({
      key,
      value
    }))
  : [];
  
  const [mainImage, setMainImage] = useState(product?.file);

  const handleImageClick = (image:any) => {
    setMainImage(image);
  };
  
  useEffect(() => {
    setMainImage(product?.file);
  }, [product?.file]);
  

  if(isLoading){
    return <div className="loading_state"> <Spin/> </div> 
  }

      return (
      <div className="single_product">
        <header>
          <HeaderLink text="Product name" isMulti={true} extraText="Product" extraLink={"/products"}/>
        </header>
        <main>
          <div className='single_product_container'>
            <div className="single_product_left">
              <div className="image_container main_image_container">
                <img src={mainImage} alt={`product ${product?.name}`} className='file' />
              </div>

              <div className="gallery_product">
                {/* {product?.attachment?.map(({attachment, index}:{attachment:string,index:number}) => (
                  <div key={index} className="image_container" onClick={() => handleImageClick(attachment)}>
                    <img src={attachment} alt={`product_multi_image_${index}`} className='multi_image' />
                  </div>
                ))} */}
                <SingleProductSwiper data={data} isLoading={isLoading}/>
                
              </div>
            </div>

            <div className="single_product_right">
              <h1>{languageObject(product?.name)}</h1>
              {ProductParamsArray?.map((param:any ,index) =>(
                <DistributorWord key={index} title={languageObject(param?.key)+ ": "+ languageObject(param?.value)}/>
              ))}
              <div className='manual'>
                <img src="/App/productManual.png" alt="productManual" />
                <p>{t("Manuals")}</p>
              </div>
            </div>

          </div>
          <ProductInfo data={product}/>
          <Contact/>
          <Similar />
        </main>
    </div>
      )
    }
    

export default Page
