'use client';

import React, { useState, useRef } from 'react';
import { CarouselCore } from '@theme/components/carousel-core';
import { Icon } from '@theme/components';
import { Product } from '@akinon/next/types';
import { Image } from '@akinon/next/components/image';
import useFavButton from '../../hooks/use-fav-button';
import { twMerge } from 'tailwind-merge';
import PluginModule, { Component } from '@akinon/next/components/plugin-module';

type ProductSliderItem = {
  product: Product;
};

export default function ProductInfoSlider({ product }: ProductSliderItem) {
  const { FavButton } = useFavButton(product.pk);
  const carouselRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);

  const goToPrev = () => {
    const newIndex =
      activeIndex === 0
        ? product?.productimage_set?.length - 1
        : activeIndex - 1;
    setActiveIndex(newIndex);
    carouselRef.current?.previous();
  };

  const goToNext = () => {
    const newIndex =
      activeIndex === product?.productimage_set?.length - 1
        ? 0
        : activeIndex + 1;
    setActiveIndex(newIndex);
    carouselRef.current?.next();
  };

  const handleThumbnailClick = (index) => {
    setActiveIndex(index);
    carouselRef.current?.goToSlide(index);
  };

  return (
    <div className="lg:grid lg:grid-cols-6">
      <div className="lg:col-span-1">
        <div className="flex flex-col items-center justify-center md:mr-[6px]">
          <button
            onClick={goToPrev}
            className={twMerge(
              'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
              [activeIndex === 0 && 'cursor-not-allowed opacity-45']
            )}
            disabled={activeIndex === 0}
          >
            <Icon name="chevron-up" size={15} className="fill-[#000000]" />
          </button>
          <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
            {product?.productimage_set?.map((item, index) => (
              <Image
                key={index}
                src={item.image}
                alt={`Thumbnail ${index}`}
                width={80}
                height={128}
                className={twMerge('cursor-pointer', [
                  activeIndex === index && 'border-2 border-primary'
                ])}
                onClick={() => handleThumbnailClick(index)}
              />
            ))}
          </div>
          <button
            onClick={goToNext}
            className={twMerge(
              'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
              [
                activeIndex === product.productimage_set.length - 1 &&
                  'cursor-not-allowed opacity-45'
              ]
            )}
            disabled={activeIndex === product.productimage_set.length - 1}
          >
            <Icon name="chevron-down" size={15} className="fill-[#000000]" />
          </button>
        </div>
      </div>

      <div className="relative lg:col-span-5">
        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />

        <PluginModule
          component={Component.ProductImageSearchFeature}
          props={{
            product,
            activeIndex,
            showResetButton: true,
            enableTextSearch: true,
            isEnabled: true
          }}
        />

        <PluginModule
          component={Component.VirtualTryOnPlugin}
          props={{
            product,
            className:
              'sm:hidden absolute bottom-[70px] right-[5px] z-[30] w-auto px-4 text-xs mt-0'
          }}
        />

        <CarouselCore
          responsive={{
            all: {
              breakpoint: { max: 5000, min: 0 },
              items: 1
            }
          }}
          arrows={false}
          swipeable={true}
          ref={carouselRef}
          afterChange={(previousSlide, { currentSlide }) => {
            setActiveIndex(currentSlide);
          }}
          containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
        >
          {product?.productimage_set?.map((item, i) => (
            <Image
              key={i}
              src={item.image}
              alt={product.name}
              draggable={false}
              aspectRatio={484 / 726}
              sizes="(min-width: 425px) 512px,
            (min-width: 601px) 576px,
            (min-width: 768px) 336px,
            (min-width: 1024px) 484px, 368px"
              fill
            />
          ))}
        </CarouselCore>
      </div>
    </div>
  );
}