import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { IoIosArrowForward } from "react-icons/io";
import { Currency } from "../../Layout/app/Const";
import Similar from "./Similar";
import { useGetSingleBaseProduct } from "../../api/baseProduct";
import { Product } from "../../types/item";
import { useParams } from "react-router-dom";
import CustomImage from "../../ui/CustomImage";
import { Spin } from "antd";
import { languageObject } from "../../utils/languageObject";
import { jsonObjectToArray } from "../../utils/jsonObjectToArray";
import HeaderLink from "../../Components/Ui/HeaderLink";
import { BaseURL } from "../../api/utils/config";

const Page = () => {
  
  const [t] = useTranslation();
  const {product_id} = useParams()
  const {data,isLoading} = useGetSingleBaseProduct({
    show:product_id
  })
  const product = data?.data?.product as Product || {}
  
  
  const [MainImage, setMainImage] = useState(product?.main_photo);

  const handelImage = (item: any) => {
    // setMainImage(item);
  };
  console.log(product?.images);
  
    const info = jsonObjectToArray(product?.info)
    
  if(isLoading){
    return <div className="loading_state"> <Spin/> </div> 
  }
  return (
    <div className="Product">
      <header>
        <HeaderLink text="Product" isMulti={true} extraText="Categories" extraLink={"categories"}/>
      </header>
      <main>
        <div className="Product_left">
          <span>
            <CustomImage src={MainImage ?? product?.main_photo} alt="" />
            <div className="gallery_product">
              {product?.images?.map((item,index)=>{
                return (
                  <span key={index}  onClick={() => handelImage(item?.path)} >
                  <CustomImage
                    
                    src={item?.path}
                    alt=""
                  />
                </span>
                )
              })}
              <span>
                <img
                  onClick={() => handelImage('/Home/p1.png')}
                  // src={}
                  alt=""
                />
              </span>
            </div>
          </span>
         
        </div>
        <div className="Product_Right">
            <h1> {languageObject(product?.name)} </h1>
            <div>

              <span>
                <h6>category</h6> <h5>{languageObject(product?.category?.name)}</h5>
              </span>
              <span>
                <h6>price</h6> <h5>{product?.price}</h5>
              </span>
              <span>
                <h6>brand</h6> <h5>SAMSUNG</h5>
              </span>
            
                {info?.map((item:any)=>{
                  return (
                    <span>
                    <h6>item</h6> <h5>SAMSUNG</h5>
                  </span>
                  )
                })}
                  <span>
                <h6>description</h6> <h5>{languageObject(product?.description)}</h5>
              </span>
            </div>
          </div>
      </main>
      <Similar  category_id={product?.category?.id} />
    </div>
  );
};

export default Page;
