"use client"

import { ImageCard } from '@/components/ImageCard/ImageCard'
import styles from "./styles.module.scss"
import { Arrow } from '@/components/Arrow/Arrow'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'

export type Slide = {
  id: string,
  src: string,
  title: string,
  href: string,
}

type ImageCardSliderProps = {
  slides: Slide[]
}

export const ImageCardSlider = ({slides}: ImageCardSliderProps) => {

  const itemsPerPage = 3;
  const [page, setPage] = useState(0)
  const [prevDisabled, setPrevDisabled] = useState(true)
  const [nextDisabled, setNextDisabled] = useState(true)

  useEffect(() => {
    if (page === 0) {
      setPrevDisabled(true)
    } else {
      setPrevDisabled(false)
    }

    if ((page + 1) * itemsPerPage > slides.length) {
      setNextDisabled(true)
    } else {
      setNextDisabled(false)
    }

  }, [slides, page, setNextDisabled, setPrevDisabled])

  const pagedSlides = useMemo(() => {
    return slides.slice(page * itemsPerPage, (page + 1) * itemsPerPage)
  }, [slides, page])

  return (
    <div className={styles.wrapper}>
      <div className={classNames({
        [styles.arrowLeft]: true,
        [styles.disabled]: prevDisabled,
      })}>
        <Arrow
          direction={"left"}
          onClick={() => setPage(page - 1)}
        />
      </div>
      <div className={styles.container}>
        {
          pagedSlides.map(slide =>
            <div key={slide.id} className={styles.item}>
              <ImageCard src={slide.src} title={slide.title} href={slide.href} />
            </div>
          )
        }
      </div>
      <div className={classNames({
        [styles.arrowRight]: true,
        [styles.disabled]: nextDisabled,
      })}>
        <Arrow
          direction={"right"}
          onClick={() => setPage(page + 1)}
        />
      </div>
    </div>

  )
}