import React, { Component } from "react"
import "./index.scss"

class Banner extends Component {
  navTop = 183
  prevY = 0
  state = {
    navs: [
      {
        text: "积福气",
        id: "lucky-value",
      },
      {
        text: "幸运大抽奖",
        id: "lucky-draw",
      },
      {
        text: "预付定金",
        id: "deposit",
      },
      {
        text: "精品特惠",
        id: "best-courses",
      },
      {
        text: "AI测试",
        id: "ai-test",
      },
      {
        text: "大咖直播",
        id: "live",
      },
    ],
    index: 0,
  }

  // componentDidMount() {
  //   window.addEventListener('scroll', throttle(this.calcNavActive, 100))
  // }

  // componentWillUnmount() {
  //   window.removeEventListener('scroll', throttle(this.calcNavActive, 100))
  // }

  // calcNavActive = () => {
  //   const {navs, index} = this.state
  //   const y = window.scrollY
  //   let swipeDirection = y > this.prevY ? 'up' : 'down'
  //   let _index
  //   if (swipeDirection === 'up') {
  //     _index = (index + 1) >= navs.length ? index : index + 1

  //   } else {
  //     _index = (index - 1) <= 0 ? 0 : index - 1
  //   }
  //   let el = document.querySelector(`#${navs[_index].id}`)
  //   let nav = document.querySelector('#main-nav')
  //   if(el) {
  //     let top = el.offsetTop

  //     if (y <= this.navTop) {
  //       nav.classList.remove('fixed')
  //     } else {
  //       !nav.classList.contains('fixed') && nav.classList.add('fixed')
  //     }

  //     if (swipeDirection === 'up') {
  //       if (y + 30 + 30 >= top) {
  //         this.setState({
  //           index: _index
  //         })
  //       }
  //     } else {
  //       if (y + 30 + 20 <= top) {
  //         this.setState({
  //           index: _index
  //         })
  //       }
  //     }
  //     this.prevY = y
  //   }

  // }

  // toSection = (i, e) => {
  //   e.preventDefault()
  //   let top = document.querySelector(`#${this.state.navs[i].id}`).offsetTop
  //   this.setState({
  //     index: i
  //   })
  //   window.scrollTo({
  //     top: top - 60,
  //     left: 0
  //   })
  // }

  render() {
    const { toSection, navs, index, isFormal, onlyShow } = this.props
    return (
      <div id={"main-banner"}>
        <div
          className={`banner ${isFormal ? "formal_banner" : ""} ${
            onlyShow ? "fc_banner" : ""
          }`}
        ></div>
        <nav id={"main-nav"}>
          <ul>
            {navs.map((item, i) => {
              return (
                <li key={i} className={index === i ? "active" : ""}>
                  <a href={`#${item.id}`} onClick={(e) => toSection(i, e)}>
                    {item.text}
                  </a>
                </li>
              )
            })}
          </ul>
        </nav>
      </div>
    )
  }
}

export default Banner
