import _ from 'lodash'
import debounce from 'lodash.debounce'
import { useTranslation } from 'next-i18next'
import { useEffect, useMemo, useRef, useState } from 'react'
import { FaArrowCircleLeft, FaArrowCircleRight } from 'react-icons/fa'
import { Button } from '../atoms/Button'
import { OpinionCardSmall } from '../molecules/OpinionCardSmall'

export const SlideReview = ({
  dataReview,
  sizeCard,
  sizeGapCard,
  sizeGapCardMobile
}: {
  dataReview: any[]
  sizeCard: number
  sizeGapCard: number
  sizeGapCardMobile: number
}) => {
  const { t } = useTranslation()

  const [currentIndex, setCurrentIndex] = useState<number>(0)
  const [sizeScreen, setSizeScreen] = useState<number>(0)

  const wrapperRef = useRef<any>()

  const memoizedValues = useMemo(() => {
    //Cuanto se me mueve el slide
    let sizeTransitionCard = sizeCard + sizeGapCard
    let mobileSizeCard = undefined
    let leftSlidePosition = 0

    //El tamaño del wrapper sin tener en cuenta los margenes
    const widthWrapper = wrapperRef.current?.offsetWidth
    const preCalculatedNumberOfCards = Math.trunc(widthWrapper / (sizeCard + sizeGapCard))
    const numberOfCards = preCalculatedNumberOfCards < 1 ? 1 : preCalculatedNumberOfCards
    let windowWidth = numberOfCards * (sizeCard + sizeGapCard) - sizeGapCard
    if (numberOfCards === 1) {
      //Mobile mode
      windowWidth = widthWrapper
      mobileSizeCard = windowWidth - sizeGapCardMobile * 2 - windowWidth * 0.1
      console.log(windowWidth)
      console.log(sizeGapCardMobile)
      console.log(mobileSizeCard)

      sizeTransitionCard = mobileSizeCard + sizeGapCardMobile
      leftSlidePosition = windowWidth - mobileSizeCard - (sizeGapCardMobile + windowWidth * 0.05)
    }

    return {
      sizeTransitionCard,
      windowWidth,
      mobileSizeCard,
      leftSlidePosition,
      numberOfCards
    }
  }, [sizeCard, sizeGapCard, sizeScreen, wrapperRef.current])

  const { sizeTransitionCard, windowWidth, mobileSizeCard, leftSlidePosition, numberOfCards } = memoizedValues

  useEffect(() => {
    const handleResize = () => setSizeScreen(window.innerWidth)
    window.addEventListener('resize', debounce(handleResize, 200))
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  const shuffleData = useMemo(() => {
    return dataReview && _.shuffle(dataReview)
  }, [dataReview])

  const handleNextReviews = () => {
    setCurrentIndex((prevIndex) => prevIndex + 1)
  }
  const handlePrevReviews = () => {
    setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1))
  }
  return (
    <div className="flex flex-col md:items-center mb-32 ">
      <div className="flex justify-center mb-10">
        <h2 className="text-2xl lg:text-[40px]">{t('common:latestReviews', 'Lee las últimas opiniones')}</h2>
      </div>
      <div ref={wrapperRef} id="wrapper" className="w-full flex justify-center items-center">
        <Button
          onClick={handlePrevReviews}
          disabled={currentIndex === 0}
          buttonClassName="justify-center p-2 w-fit h-[55px]"
        >
          <div className="flex justify-center items-center w-6 h-6">
            <FaArrowCircleLeft />
          </div>
        </Button>
        <div
          id="window"
          className="flex justify-start overflow-hidden"
          style={{
            width: `${windowWidth}px`
          }}
        >
          <div
            style={{
              transform: `translate(${
                currentIndex * -sizeTransitionCard
                // leftSlidePosition
              }px)`,
              gap: `${mobileSizeCard && mobileSizeCard !== 0 ? sizeGapCardMobile : sizeGapCard}px`
            }}
            className={`flex justify-center transition-transform duration-700	`}
          >
            {shuffleData?.map((review: any) => (
              <OpinionCardSmall
                key={review.id}
                review={review}
                sizeCard={mobileSizeCard && mobileSizeCard !== 0 ? mobileSizeCard : sizeCard}
              />
            ))}
          </div>
        </div>
        <Button
          onClick={handleNextReviews}
          disabled={currentIndex + numberOfCards >= dataReview.length}
          buttonClassName="justify-center p-2 w-fit h-[55px]"
        >
          <div className="flex justify-center items-center w-6 h-6">
            <FaArrowCircleRight />
          </div>
        </Button>
      </div>
    </div>
  )
}
