import React, { useRef, useState, useEffect } from 'react'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
import VerticalBanner from './components/Banner/banner'
import Background from './components/Background'
import TabBar from './components/TabBar'
import Slider from 'react-slick'
import FlipPic from './components/flipPic'
import isMobile from '@/utils/isMobile'

function A1home() {
  const history = useHistory()
  const sliderRef = useRef<Slider>(null)
  const [activeIndex, setActiveIndex] = useState<number>(0)

  const goTo = (index: number) => {
    sliderRef.current?.slickGoTo(index)
  }

  const slides = [
    {
      id: 1,
      background: 'transparent',
      content: (
        <>
          <img
            className='title1'
            src={require('./image/caro1/title1.png')}
            alt=''
            draggable='false'
          />
          <img
            onClick={() => window.open('https://houseoss.4dkankan.com/project/hubeiMuseum/hbgdwm/scene/index.html#/home?m=SG-nlIdX3CyQyJ-06')}
            className='button1'
            src={require('./image/caro1/button1.png')}
            alt=''
            draggable='false'
          />
        </>
      )
    },
    {
      id: 2,
      background: 'transparent',
      content: (
        <>
          <img
            className='title1'
            src={require('./image/caro2/title2.png')}
            alt=''
            draggable='false'
          />
          <img
            onClick={() => window.open('https://houseoss.4dkankan.com/project/hubeiMuseum/hbjdfy/scene/index.html#/home?m=SG-NhzxmM4kcLn-05')}
            className='button1'
            src={require('./image/caro2/button2.png')}
            alt=''
            draggable='false'
          />
        </>
      )
    },
    {
      id: 3,
      background: 'transparent',
      content: (
        <>
          <img
            className='title3'
            src={require('./image/caro3/title3.png')}
            alt=''
            draggable='false'
          />
          <img
            onClick={() => window.open('https://houseoss.4dkankan.com/project/hubeiMuseum/hbxddyjz/scene/index.html#/home?m=SG-eIO0OyK0Iuk-03')}
            className='button3'
            src={require(`./image/caro3/${isMobile() ? 'button3_M' : 'button3'}.png`)}
            alt=''
            draggable='false'
          />
        </>
      )
    }
  ]
  return (
    <div className={styles.A1home}>
      <Background activeIndex={activeIndex} />
      <VerticalBanner
        ref={sliderRef}
        slides={slides}
        activeIndex={activeIndex}
        setActiveIndex={setActiveIndex}
      />
      <FlipPic activeIndex={activeIndex} />
      <img
        className='logo'
        src={require('./image/logo.png')}
        alt=''
        draggable='false'
      />
      <TabBar activeIndex={activeIndex} goTo={goTo} />
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home

