import { IProps } from "@/common/Iprops.interface"
import { AppContianer } from "@/layouts/AppContianer"

import { useRef, useState, useEffect, useMemo, useCallback, Fragment } from 'react'
import { getEvents } from "@/fetch/dataFetch"
import { EventItem, EventsTable } from "./EventItem"
import { EventsScrollView } from "@/components/EventsScrollView"

import Step from "@/assets/img/step.png"


interface MemorabiliaType extends IProps {

}


export const Memorabilia = () => {
  const [data,setData] = useState<any>()
  const [currentSlide,setCurrentSlide] = useState(0)
  useEffect(()=>{
    const fetchData = getEvents(8).subscribe(v=>{
      setData(v)
    },err=>{ throw new Error(err)})
    return ()=> fetchData.unsubscribe()
  },[currentSlide])
  
  const scrollHandler: {
    next?: Function
    prev?: Function
  } = {}
  const getScrollHandler = (next: Function, prev: Function) => {
    scrollHandler.next = next
    scrollHandler.prev = prev
  }

  const scrollTo = (step: number) => {
    switch(step) {
      case 1:
        scrollHandler.next ? scrollHandler.next() : null;
        break
      case -1:
        scrollHandler.prev ? scrollHandler.prev() : null;
        break
    }
  }

  return (
    <AppContianer className="flex items-center justify-start h-full w-full relative  labtop:px-[120px] ">

      <div className='w-[896px]'>
        <div className='absolute top-12 labtop:right-[14rem] right-[7rem]'>
          <div className="hero-title">Memorabilia</div>
          <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
          <div className=" w-28 h-1 bg-theme-dark rounded"></div>
            <div>功能特点</div>
          </div>
        </div>
        {
          data?
          <div className="relative">
            <img className='absolute top-96 -left-16 rotate-180 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(-1)} src={Step} alt="" />
              <EventsScrollView getScrollHandler={getScrollHandler}>
                <div className='flex '>
                  {
                    data.length>0&&data.map((g:any,index:number)=>(
                      <div className='w-full h-[800px]  translate-y-[60px]  ' key={index}>
                      <EventsTable tableIndex={currentSlide} data={g} ></EventsTable>
                      </div>
                    ))
                  }
                </div>
              </EventsScrollView>
            <img className='absolute top-96 -right-16 opacity-30 hover:opacity-100  cursor-pointer' onClick={() => scrollTo(1)} src={Step} alt="" />
          </div>
          :
          <div>
            loading
          </div>
        }
      </div>
    
    </AppContianer >
  )
}