import React, { useRef } from 'react'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
import VerticalBanner from './components/banner'
import Slider from 'react-slick'
import { isMobileFu } from '@/utils/history'
function A1home({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
  const history = useHistory()
  const sliderRef = useRef<Slider>(null)

  const nextPage = () => {
    sliderRef.current?.slickNext()
  }

  // 图片 hover 事件
  const handleMouseMove = (e: React.MouseEvent<HTMLImageElement>) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top
    e.currentTarget.style.setProperty('--mouse-x', `${x - rect.width / 2}`)
    e.currentTarget.style.setProperty('--mouse-y', `${y - rect.height / 2}`)
  }

  const ArrorAnimation = ({ handleClick }: { handleClick: () => void }) => {
    return (
      <div className='arrowAnimation' onClick={handleClick}>
        <img
          className='arrorBg arror1'
          src={require('./image/next.png')}
          alt=''
          draggable='false'
        />
        <img
          className='arror arror2'
          src={require('./image/arr1.png')}
          alt=''
          draggable='false'
        />
        <img
          className='arror arror3'
          src={require('./image/arr2.png')}
          alt=''
          draggable='false'
        />
        <img
          className='arror arror4'
          src={require('./image/arr3.png')}
          alt=''
          draggable='false'
        />
        <img
          className='arror arror5'
          src={require('./image/arr4.png')}
          alt=''
          draggable='false'
        />
        <img
          className='arror arror6'
          src={require('./image/arr5.png')}
          alt=''
          draggable='false'
        />
      </div>
    )
  }
  const IconList = ({
    style,
    icon1,
    icon2
  }: {
    style: React.CSSProperties
    icon1: string
    icon2: string
  }) => {
    return (
      <div className='iconList' style={style}>
        <div className='icon'>
          <img src={icon1} onClick={() => window.open('https://houseoss.4dkankan.com/project/hubeiMuseum/wwq/index.html', '_blank')} alt='' draggable='false' />
          <div className='txt'>精品馆藏</div>
        </div>
        <div className='icon' onClick={() => window.open('https://houseoss.4dkankan.com/project/hubeiMuseum/jcty/scene/index.html#/home?m=mm-1581', '_blank')}>
          <img src={icon2} alt='' draggable='false' />
          <div className='txt'>线上云展</div>
        </div>
      </div>
    )
  }
  const slides = [
    {
      id: 1,
      background: require('./image/caro1/bg1.png'),
      content: (
        <>
          <img
            className='logo'
            src={require('./image/logo.png')}
            alt=''
            draggable='false'
          />
          <img
            className='title1'
            src={require('./image/caro1/title1.png')}
            alt=''
            draggable='false'
          />
          <img
            className='item1'
            onMouseMove={handleMouseMove}
            src={require('./image/caro1/item1.png')}
            alt=''
            draggable='false'
          />
          <IconList
            style={{ color: '#F2E4AD' }}
            icon1={require('./image/caro1/icon1.png')}
            icon2={require('./image/caro1/icon2.png')}
          />
        </>
      )
    },
    {
      id: 2,
      background: require('./image/caro2/bg2.png'),
      content: (
        <>
          <img
            className='logo'
            src={require('./image/logo.png')}
            alt=''
            draggable='false'
          />
          <img
            className='title2'
            src={require('./image/caro2/title2.png')}
            alt=''
            draggable='false'
          />
          <img
            className='item2Bg'
            alt=''
            draggable='false'
          />
          <img
            className='item2'
            onMouseMove={handleMouseMove}
            src={require('./image/caro2/item2.png')}
            alt=''
            draggable='false'
          />
          <IconList
            style={{ color: '#E9FFFB' }}
            icon1={require('./image/caro2/icon1.png')}
            icon2={require('./image/caro2/icon2.png')}
          />
        </>
      )
    },
    {
      id: 3,
      background: isMobileFu() ? require('./image/caro3/bg3_M.png') : require('./image/caro3/bg3.png'),
      content: (
        <>
          <img
            className='logo'
            src={require('./image/logo2.png')}
            alt=''
            draggable='false'
          />
          <img
            className='title1'
            src={require('./image/caro2/title2.png')}
            alt=''
            draggable='false'
          />
          <img
            className='item3'
            onMouseMove={handleMouseMove}
            src={require('./image/caro3/item3.png')}
            alt=''
            draggable='false'
          />
          <IconList
            style={{ color: '#A78243' }}
            icon1={require('./image/caro3/icon1.png')}
            icon2={require('./image/caro3/icon2.png')}
          />
        </>
      )
    },
    {
      id: 4,
      background: require('./image/caro4/bg4.png'),
      content: (
        <>
          <img
            className='logo'
            src={require('./image/logo.png')}
            alt=''
            draggable='false'
          />
          <img
            className='title1'
            src={require('./image/caro4/title4.png')}
            alt=''
            draggable='false'
          />
          <img
            className='item4'
            onMouseMove={handleMouseMove}
            src={require('./image/caro4/item4.png')}
            alt=''
            draggable='false'
          />
          <IconList
            style={{ color: '#877155' }}
            icon1={require('./image/caro4/icon1.png')}
            icon2={require('./image/caro4/icon2.png')}
          />
        </>
      )
    }
  ]
  return (
    <div className={styles.A1home} style={{ display: show ? 'block' : 'none' }}>
      <VerticalBanner ref={sliderRef} slides={slides} />
      <ArrorAnimation handleClick={nextPage} />
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
