import React from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination, Navigation } from 'swiper'

import { IHomeBannerList, NewestService } from 'Newest/Newest.service'
import classNames from 'classnames'
import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.css'
import styles from '../css/CustomSwiper.module.scss'

type ICustormSwiperProps = {
  name: string // 轮播组件名称
  boxSize: 'block' | 'large' | 'middle' | 'small'
  children?: React.ReactNode | null
  list?: IHomeBannerList[]
}
/**
 * 最新-swiper
 */
const CustormSwiper: React.FC<ICustormSwiperProps> = props => {
  const { name, boxSize, children = null, list = [] } = props
  const { run: applyRecord } = useRequest(NewestService.postBannerAddHistory, {
    manual: true,
    formatResult: response => response.data.Data
  })
  // const headTitleClass = (item: IHomeBannerList, index: number, boxSize: 'block' | 'large' | 'middle' | 'small') => {
  //   const titleDiv = document.querySelector(`#${name}_${index}`)

  //   return classNames(styles['head-title'], {
  //     [styles['lines-title']]:
  //       boxSize === 'small' ? true : item.Subtitle ? titleDiv?.clientHeight && titleDiv?.clientHeight > 37 : false
  //   })
  // }
  const handleToSomePage = (item: IHomeBannerList) => {
    // applyRecord(item.BannerId)
    item.Path && window.open(item.Path)
  }
  return (
    <>
      {list.length === 1 ? (
        <div className={styles['customswiper-wrapper']}>
          <div
            className={`${styles['text-center-box']} ${styles[`text-${boxSize}-box`]}`}
            style={{ background: `url(${list[0].IndexImg}) no-repeat left/cover` }}
            onClick={handleToSomePage.bind(this, list[0])}
          >
            <div className={styles['banner-title-wrapper']}>
              <div
                className={`${styles['head-title']}`}
                id={`${name}_1`}
                style={{ color: list[0].TitleColor || '#ffffff' }}
              >
                {list[0].Title}
              </div>
              <div className={styles['subtitle-text']} style={{ color: list[0].DescribeColor || '#ffffff' }}>
                {list[0].Describe}
              </div>
            </div>
          </div>
        </div>
      ) : (
        <Swiper
          modules={[Autoplay, Pagination, Navigation]}
          autoplay={{
            delay: 4000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          }}
          loop
          pagination={{ clickable: true }}
          className={styles['customswiper-wrapper']}
        >
          {children ? (
            children
          ) : (
            <>
              {list?.map((item: IHomeBannerList, index: number) => (
                <SwiperSlide key={index}>
                  <div
                    className={`${styles['text-center-box']} ${styles[`text-${boxSize}-box`]}`}
                    style={{ background: `url(${item.IndexImg}) no-repeat left/cover` }}
                    onClick={handleToSomePage.bind(this, item)}
                  >
                    <div className={styles['banner-title-wrapper']}>
                      <div
                        className={`${styles['head-title']}`}
                        id={`${name}_${index}`}
                        style={{ color: item.TitleColor || '#ffffff' }}
                      >
                        {item.Title}
                      </div>
                      <div className={styles['subtitle-text']} style={{ color: item.DescribeColor || '#ffffff' }}>
                        {item.Describe}
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </>
          )}

          <div className="swiper-pagination" />
        </Swiper>
      )}
    </>
  )
}

export default CustormSwiper
