"use client";
import React, { useState } from "react";
import Link from "next/link";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Image from "next/image";
import CountdownComponent from "../common/Countdown";
import Tooltip from "@/components/shopDetails/Tooltip";
import VariantOption  from "@/components/shopDetails/VariantOption";

import { colors, sizeOptions } from "@/data/singleProductOptions";
import Quantity from "./Quantity";
import MainPageQuantity from "../shopDetails/MainPageQuantity";
import Slider1ZoomOuter from "./sliders/Slider1ZoomOuter";

import { useContextElement } from "@/context/Context";
import { openCartModal } from "@/utlis/openCartModal";
import DescriptionModal from "@/components/modals/DescriptionModal";
import { differenceInYears, differenceInDays, subYears } from 'date-fns';




export default function DetailsOuterZoom({ product }) {

	console.log("outerzoom",product);
	let image = "";
	let cartimage = "";
	if (Array.isArray(product?.images) && product?.images.length > 0) {
		image = `https://backend.canshop.ge/${product?.images[0].file_name}`;
		cartimage=product?.images[0].file_name;
	}


	
	
	const {
	token,
		addProductToCart,
		isAddedToCartProducts,
        removeFromWishlist ,
		addToWishlist,
		isAddedtoWishlist,
		AddedCartProductQuantity,
		removeFromCart,
		isAddedToCartProductqty,
	} = useContextElement();

	

	const CustomNextArrow = ({ onClick }) => {
		return (
			<div
				className="custom-arrow custom-next"
				onClick={onClick}
				role="button"
				aria-label="Next slide"
			>
				<svg
					width="7"
					height="11"
					viewBox="0 0 7 11"
					fill="currentColor"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path d="M1.5 11L7 5.5L1.5 0L0.52375 0.97625L5.0475 5.5L0.52375 10.0238L1.5 11Z" />
				</svg>
			</div>
		);
	};

	const CustomPrevArrow = ({ onClick }) => {
		return (
			<div
				className="custom-arrow custom-prev"
				onClick={onClick}
				role="button"
				aria-label="Previous slide"
			>
				<svg
					width="7"
					height="11"
					viewBox="0 0 7 11"
					fill="currentColor"
					xmlns="http://www.w3.org/2000/svg"
					style={{ transform: "rotate(180deg)" }}
				>
					<path d="M1.5 11L7 5.5L1.5 0L0.52375 0.97625L5.0475 5.5L0.52375 10.0238L1.5 11Z" />
				</svg>
			</div>
		);
	};
	const [myQuantity, setmyQuantity] = useState(1);
	const [currentColor, setCurrentColor] = useState(colors[0]);
	const [isLoaded, setLoaded] = useState(true);
	const productGroup = Array.isArray(product?.product_group)
		? product.product_group
		: [];

	const [currentImageOption, setCurrentImageOption] = useState(
		productGroup[0] ?? null
	);
	const useSlider = productGroup.length > 9;

	//const [currentSize, setCurrentSize] = useState(sizeOptions[1]);
	// const [currentSize, setCurrentSize] = useState(product?.product_sizes_array?.[0] || "");
	const [currentSize, setCurrentSize] = useState(
		product?.product_sizes_array?.[0] || ""
	);

	const [quantity, setQuantity] = useState(
		AddedCartProductQuantity(product?.id)
	);

	const handleColor = (color) => {
		const updatedColor = colors.filter(
			(elm) => elm.value.toLowerCase() === color?.toLowerCase()
		)[0];
		if (updatedColor) {
			setCurrentColor(updatedColor);
		}
	};

	const { cartProducts, setCartProducts, totalPrice } = useContextElement();

	const removeItem = (id) => {
		setCartProducts((pre) => [...pre.filter((elm) => elm.id !== id)]);
	};

	
const createdAt = new Date(product?.shop_details?.created_at);
const today = new Date();

// 1. გამოითვლება წლები
const years = differenceInYears(today, createdAt);

// 2. წლების გამოკლება თავიდან
const createdPlusYears = subYears(today, years);

// 3. დარჩენილი დღეები
const remainingDays = differenceInDays(today, subYears(today, years));



return (
<section
	className="flat-spacing-4 pt_0"
	style={{ maxWidth: "100vw", overflow: "clip" }}
>
	<div
		className="tf-main-product section-image-zoom"
		style={{ maxWidth: "100vw", overflow: "clip" }}
	>
		<div className="container outerzoom" >
			<div className="row">
				<div className="col-md-6">
					<div className="tf-product-media-wrap sticky-top">
						<div className="thumbs-slider text-center">
							<Slider1ZoomOuter
								handleColor={handleColor}
								currentColor={currentColor.value}
								imageslist={product?.images || []}
								firstImage={image}
							/>
						</div>
					</div>
				</div>
<div className="col-md-6">
	<div className="tf-product-info-wrap position-relative">
		<div className="tf-zoom-main" />
		<div className="tf-product-info-list other-image-zoom">
			<div className="tf-product-info-title mainfont">
				<h6 className="mainfont">
					{product?.title_web ? (
						product.title_web
					) : (
						<div className="emptyimage">&nbsp;</div>
					)}
				</h6>
			</div>
			{product?.amount_in_stock <= 5 && (
				<div className="tf-product-info-badges">
					<div className="badges mainfont">Best seller</div>
					<div className="product-status-content">
						<i className="icon-lightning" />
						<p className="fw-6 mainfont">
							იჩქარე! აქციის მარაგი იწურება.
						</p>
					</div>
				</div>
			)}
			<div className="tf-product-info-price custom_price">
				<div className="price-on-sale">
					₾
					{product?.saleprice !== -1 &&
					product?.saleprice !== product?.price
						? product?.saleprice
						: product?.price}{" "}
				</div>
				{product?.saleprice !== 0 &&
				product?.saleprice !== product?.price ? (
					<div className="price-on-sale">
						<del style={{ color: "#707070" }}>{product?.price}</del>
					</div>
				) : (
					""
				)}
				{product?.saleprice !== 0 &&
				product?.saleprice !== product?.price ? (
					<div className="badges-on-sale">
						<span>
							{(
								((product?.price - product?.saleprice) /
									product?.price) *
								100
							).toFixed(0)}
						</span>
						% OFF
					</div>
				) : (
					""
				)}
			</div>
						
<div className="tf-product-info-countdown">
	<div className="countdown-wrap">
		<div className="countdown-title">
			<i className="icon-time tf-ani-tada" />
			<div className="mainfont">
				იჩქარე! აქცია სრულდება:
			</div>
		</div>
		<div className="tf-countdown style-1">
			<div className="js-countdown mainfont">
				{product?.sale_edate && (
					<CountdownComponent
						endDate={product?.sale_edate}
					/>
				)}
			</div>
		</div>
	</div>
</div>
									
<div className="tf-product-info-variant-picker">
  <div className="variant-picker-item">
    {useSlider ? (
      <Slider
        slidesToShow={6}
        slidesToScroll={2}
        arrows={true}
        infinite={false}
        speed={500}
        nextArrow={<CustomNextArrow />}
        prevArrow={<CustomPrevArrow />}
      >
        {(product?.product_group || []).map((option) => (
          <div key={option.id}>
            <VariantOption
              option={option}
              currentImageOption={currentImageOption}
              setCurrentImageOption={setCurrentImageOption}
            />
          </div>
        ))}
      </Slider>
    ) : (
     <div className="noslider">
        {(product?.product_group || []).map((option) => (
          <React.Fragment key={option.id}>
            <VariantOption
              option={option}
              currentImageOption={currentImageOption}
              setCurrentImageOption={setCurrentImageOption}
            />
          </React.Fragment>
        ))}
      </div>
    )}
  </div>
</div>

<div className="tf-product-info-liveview">
<p className="fw-8 info-line">
	<span className="label mainfont"> ბარკოდი:</span>
	<span className="font-normal mainfont">
		{product?.barcode}
	</span>
</p>
</div>
<div className="tf-product-info-liveview">
<p className="fw-8 info-line">
	<span className="label  mainfont"> ბრენდი:</span>
	<Link
		href={`/product-brand/${product?.brand_id}`}
		className=" mainfont nobold  mainfont"
	>
		{product?.brand_name?.full_name}
	</Link>
</p>
</div>
<div className="tf-product-info-liveview">
<p className="fw-8 info-line">
	<span className="label mainfont">კატეგორია:</span>
	<Link
		href={`/product-catalog/${product?.collection_id}`}
		className=" mainfont nobold"
	>
		{product?.category_name?.title}
	</Link>
</p>
</div>
<div className="tf-product-info-liveview">
<p className="fw-8 info-line">
	<span className="label mainfont"> რაოდენობა:</span>
	<span
		className="font-normal mainfont"
		style={{
			color: product?.amount_in_stock > 1 ? "black" : "red",
			fontWeight: "bold",
		}}
	>
		{product?.amount_in_stock > 1
			? product?.amount_in_stock
			: "არ არის მარაგში"}
	</span>
</p>
</div>
{product?.size && (
<div className="tf-product-info-liveview">
	<p className="fw-8 info-line">
		<span className="label mainfont"> ზომა:</span>
		<span className="font-normal mainfont">
			{product?.size}
		</span>
	</p>
</div>
)}
{product?.weight && (
<div className="tf-product-info-liveview">
	<p className="fw-8 info-line">
		<span className="label mainfont"> წონა:</span>
		<span className="font-normal mainfont">
			{product?.weight}
		</span>
	</p>
</div>
)}
{product?.volume && (
<div className="tf-product-info-liveview">
	<p className="fw-8 info-line">
		<span className="label mainfont"> მოცულობა:</span>
		<span className="font-normal mainfont">
			{product?.volume}
		</span>
	</p>
</div>
)}
{product?.amount_in_package && (
<div className="tf-product-info-liveview">
	<p className="fw-8 info-line">
		<span className="label mainfont"> რაოდენობა შეფუთვაში:</span>
		<span className="font-normal mainfont">
			{product?.amount_in_package}
		</span>
	</p>
</div>
)}
{product?.type && (
<div className="tf-product-info-liveview">
	<p className="fw-8 info-line">
		<span className="label mainfont"> ტიპი:</span>
		<span className="font-normal mainfont">
			{product?.type}
		</span>
	</p>
</div>
)}
<div className="tf-product-info-liveview">
<div className="fw-8 info-line">
	<span className="label mainfont">მაღაზია:</span>

	<span className="tooltip-wrapper mainfont nobold">
		{product?.shop_name?.name}

		<span className="mainfont tooltip-box">
			<div className="uppercase tl-title">{product?.shop_name?.name}</div>

			<div className="fw-8 info-line">
				<span className="label  mainfont">
					{" "}
					ქენშოპზეა:
				</span>
				<span className="font-normal oncanshop">
					{years} წელი  {remainingDays} დღე
				</span>
			</div>
			<div className="fw-8 info-line">
				<span className="label mainfont">
					{" "}
					გაყიდული პროდუქცია:
				</span>
				<span className="font-normal soldproduct">
					{product?.shop_details?.sold_product_count}
				</span>
			</div>
			
			<Link
				href={`/product-shop/${product?.shop_id}`}
				className="tooltip-button  uppercase"
			>
				მაღაზიის პროდუქცია სრულად
			</Link>
		</span>
	</span>
</div>
</div>

{product?.has_gift === 1 && product?.gifts?.length > 0 && (
<div className="tf-product-info-liveview">
	{product.gifts.map((gift, index) => (
		<div key={index}>
			<p className="fw-6">
				საჩუქარი:{" "}
				<span className="font-normal">{gift.title}</span>
			</p>
			{gift?.images?.[0]?.file_name && (
				<img
					src={`https://backend.canshop.ge/${gift.images[0].file_name}`}
					alt={gift.title}
					style={{ maxWidth: "100px", marginTop: "10px" }}
				/>
			)}
		</div>
	))}
</div>
)}

<div className="productdesc">
<>
	<a
		href="#"
		onClick={(e) => {
			e.preventDefault();
			openCartModal("descCart");
		}}
		className="descr"
	>
		იხილეთ სრულად <span style={{ display: "inline-block", transform: "translateY(1px)", marginLeft: "3px", marginTop: "2px", color: "#a9a8b0" }}>{'>'}</span>

	</a>

	<DescriptionModal data={product} />
</>
</div>

{Array.isArray(product?.product_sizes_array) &&
product.product_sizes_array.some(
	(size) => size && size.trim() !== ""
) && (
	<div className="tf-product-info-variant-picker">
		<div className="variant-picker-item">
			<div className="d-flex justify-content-between align-items-center">
				<div className="variant-picker-label mainfont">
					ზომა:
					<span className="fw-6 variant-picker-label-value">
						{currentSize.value}
					</span>
				</div>
				<a
					href="#find_size"
					data-bs-toggle="modal"
					className="find-size fw-6 mainfont"
				>
					ზომების ცხრილი
				</a>
			</div>

			<form className="variant-picker-values">
				{product.product_sizes_array.map((size, index) => (
					<React.Fragment key={index}>
						<input
							type="radio"
							name="size1"
							id={`size-${size}`}
							readOnly
							checked={currentSize === size}
						/>
						<label
							onClick={() => setCurrentSize(size)}
							className="style-text"
							htmlFor={`size-${size}`}
							data-value={size}
						>
							<div>{size}</div>
						</label>
					</React.Fragment>
				))}
			</form>
		</div>
	</div>
)}
<div className="tf-product-info-quantity mt-3 hide-mobile">
<div className="quantity-title fw-6 mainfont">
	რაოდენობა
</div>

</div>

  <div className="button-group p-0 hide-mobile" style={{width:"400px"}}>
														<div className="toolbar-item">
															<MainPageQuantity
																			setQuantity={setmyQuantity}
																			addProduct={() =>
																				product?.id &&
																				addProductToCart(
																					product?.id,
																					cartimage,
																					product?.title,
																					product?.saleprice,
																					product?.price,
																					myQuantity
																				)
																			}
																			minusFunc={() => removeFromCart(token? product?.products_id : product?.products_id)}
																			AddedCartProductQuantity={AddedCartProductQuantity(
																				token? product?.products_id :  product?.products_id
																			)}
																			
																		/>
														</div>
														<div className="toolbar-item">
															<a href="/" className="secondbutton" >
																უკან დაბრუნება
															</a>
														</div>
														<a
														onClick={() =>
															addToWishlist(
																product?.id,
																cartimage,
																product?.title,
																product?.saleprice,
																product?.price
															)
														}
														className="tf-product-btn-wishlist  box-icon bg_white wishlist btn-icon-action">
														<span
															className={`icon icon-heart ${isAddedtoWishlist(product?.id) ? "added" : ""}`}
															onClick={() =>
																isAddedtoWishlist(product?.id)
																? removeFromWishlist(product?.products_id)
																: addToWishlist(	product?.id,
																cartimage,
																product?.title,
																product?.saleprice,
																product?.price) // <-- if you have add function
															}
															/>
														<span className="tooltip">
															{isAddedtoWishlist(product?.id)
																? "Already Wishlisted"
																: "Add to Wishlist"}
														</span>
														
														</a>
													</div>




</div>
</div>
</div>
</div>
				</div>
			</div>
		</section>
	);
}