import React, { useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import LazyImg from '@/components/LazyImg'
import { baseURL, hotInfo } from '@/utils/http'
import BtnRight from '@/components/BtnRight'

type Props = {
  closeFu: () => void
}

function ZHot0({ closeFu }: Props) {
  // 底部选中
  const [flooInd, setFlooInd] = useState(0)

  // 点击切换底部
  const flooIndFu = useCallback((ind: number) => {
    setImgAc(0)
    const dom = document.querySelector('.h1Mrr')
    if (dom) dom.scrollTop = 0
    setFlooInd(ind)
  }, [])

  // 图片切换
  const [imgAc, setImgAc] = useState(0)

  const acData = useMemo(() => {
    return hotInfo['周礼九拜'][0].data[flooInd] || []
  }, [flooInd])

  return (
    <div
      id='HotOpCss'
      className={styles.ZHot0}
      style={{
        backgroundImage: `url(${baseURL}visit/hot1bj.png)`
      }}
    >
      <div className='hot1Box'>
        {/* 主体 */}
        <div className='hot1Main'>
          {/* 左边 */}
          <div className='h1Mll'>
            {/* 左右箭头 */}
            <img
              onClick={() => setImgAc(imgAc - 1)}
              hidden={acData.imgArr.length <= 1}
              style={{
                opacity: imgAc === 0 ? 0.5 : 1,
                pointerEvents: imgAc === 0 ? 'none' : 'auto'
              }}
              className='h1MllIcon'
              src={`${baseURL}visit/icon-zuo-red.png`}
              alt=''
            />
            <img
              onClick={() => setImgAc(imgAc + 1)}
              hidden={acData.imgArr.length <= 1}
              style={{
                opacity: imgAc === acData.imgArr.length - 1 ? 0.5 : 1,
                pointerEvents: imgAc === acData.imgArr.length - 1 ? 'none' : 'auto'
              }}
              className='h1MllIcon h1Mllyou'
              src={`${baseURL}visit/icon-you-red.png`}
              alt=''
            />

            <div
              className='h1MllCo'
              style={{
                transform: `translateX(-${(100 / acData.imgArr.length) * imgAc}%)`,
                width: `${100 * acData.imgArr.length}%`
              }}
            >
              {acData.imgArr.map((url, index) => (
                <div
                  className='h1MllRow'
                  key={index}
                  style={{ width: 100 / acData.imgArr.length + '%' }}
                >
                  <LazyImg src={baseURL + url} />
                </div>
              ))}
            </div>
          </div>
          {/* 右边 */}
          <div className='h1Mrr'>
            <div className='h1MrrTxt'>
              <h1>{acData.name}</h1>
              <div dangerouslySetInnerHTML={{ __html: acData.txt }}></div>
            </div>
          </div>

          {/* 返回按钮 */}
          <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
        </div>

        {/* 底部 */}
        <div className='h1Floo' style={{ backgroundImage: `url(${baseURL}visit/h1fllo.png)` }}>
          {hotInfo['周礼九拜'][0].data.map((item, index) => (
            <div
              onClick={() => flooIndFu(index)}
              className={classNames('h1FlooRow sizeNo', flooInd === index ? 'h1FlooRowShow' : '')}
              key={index}
            >
              {item.name}

              {flooInd === index ? (
                <img className='h1FlooRowShowImg' src={`${baseURL}visit/bichuyuan.png`} alt='' />
              ) : null}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

const MemoZHot0 = React.memo(ZHot0)

export default MemoZHot0
