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 fetch =getEvents(8).subscribe(v=>{
      setData(v)
    },err=>{ throw new Error(err)})
    return ()=> fetch.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 >
      <div className="flex  h-full min-h-[750px] items-center justify-start ">
         <div className='absolute top-12 right-[120px] '>
          <div className="hero-title">Memorabilia</div>
          <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
          <div className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
            <div>大事记</div>
          </div>
        </div>
      <div className='w-10/12 relative '>
        {
          data?
          <div className="relative flex">
           <img className='absolute top-[18rem] -left-16 rotate-180 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(-1)} src={Step} alt="" />
              <div className='labtop:w-10/12 w-full mx-auto'>
              <EventsScrollView getScrollHandler={getScrollHandler}>
                <div className='flex'>
                  {
                    data&&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>
              </div>
              <img className='absolute top-[18rem] -right-16 opacity-30 hover:opacity-100  cursor-pointer' onClick={() => scrollTo(1)} src={Step} alt="" />
          
          </div>
          :
          <div>
            loading
          </div>
        }
      </div>
      </div>
    </AppContianer >
  )
}