import React, { useEffect, useState } from 'react';
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
import { isMobile } from 'educoder';
import './index.scss';

import FirstSection from './FirstSection';
import SecondSection from './SecondSection';
import ThirdSection from './ThirdSection';
import FourthSection from './FourthSection';
import FifthSection from './FifthSection';
import SixthSection from './SixthSection';
import SeventhSection from './SeventhSection';
import Footer from './Footer';


let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase()));
function HomePage({ history }) {

  useEffect(() => {
    window.addEventListener("scroll", scrollListener, false);
    return () => {
      window.removeEventListener("scroll", scrollListener, false);
    }
  }, []);

  const [first, setFirst] = useState(true);
  const [second, setSecond] = useState(isMobile);
  const [third, setThird] = useState(false || isHuawei);
  const [fourth, setFourth] = useState(false || isHuawei);
  const [fifth, setFifth] = useState(false || isHuawei);
  const [sixth, setSixth] = useState(false || isHuawei);


  let settings = JSON.parse(localStorage.chromesetting);
  let main_web_site_url = settings.main_web_site_url;


  function scrollListener() {
    let clientHeight = document.body.clientHeight;
    let clientWidth = document.body.clientWidth;
    // let secondSection = document.querySelector(".home-second-section").offsetTop;
    // let thirdSection = document.querySelector(".home-third-section").offsetTop;
    // let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
    // let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
    // let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
    // let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
    let secondSection = document.getElementById("home-second-section").offsetTop;
    let thirdSection = document.getElementById("home-third-section").offsetTop;
    let fourthSection = document.getElementById("home-fourth-section").offsetTop;
    let fifthSection = document.getElementById("home-fifth-section").offsetTop;
    let sixthSection = document.getElementById("home-sixth-section").offsetTop;
    let seventhSection = document.getElementById("home-seventh-section").offsetTop;

    let top = document.documentElement.scrollTop;


    if (top >= clientHeight - 300) {
      setFirst(false);
    } else {
      setFirst(true);
    }

    if (clientWidth > 1100) {
      // 第二个动效
      if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) {
        setSecond(true);
      } else {
        setSecond(false);
      }
    } else {
      // 第二个动效
      if (top >= secondSection - clientHeight && top < thirdSection) {
        setSecond(true);
      } else {
        setSecond(false);
      }
    }

    // 第三个动效
    if (top >= thirdSection - clientHeight && top < fourthSection) {
      setThird(true);
    } else {
      setThird(false);
    }

    // 第四个动效
    if (top >= fourthSection - clientHeight && top < fifthSection) {
      setFourth(true);
    } else {
      setFourth(false);
    }

    // 第五个动效
    if (top >= fifthSection - clientHeight && top < sixthSection) {
      setFifth(true);
    } else {
      setFifth(false);
    }

    // 第六个动效
    if (top >= sixthSection - clientHeight && top < seventhSection - 100) {
      setSixth(true);
    } else {
      setSixth(false);
    }

    if(isHuawei){
      setFourth(true);
      setSixth(true);
    }
  }


  return (
    <div className="homePage">

      <div id="home-first-section" className="home-first-section">
        <FirstSection first={first} />
      </div>


      <div id="home-second-section" className="home-second-section">
        <SecondSection second={second} main_web_site_url={main_web_site_url} />
      </div>


      <div id="home-third-section" className="home-third-section">
        <ThirdSection third={third} />
      </div>

      <div id="home-fourth-section" className="home-fourth-section">
        <FourthSection fourth={fourth} history={history} />
      </div>

      <div id="home-fifth-section" className="home-fifth-section">
        <FifthSection fifth={fifth} history={history} />
      </div>

      <div id="home-sixth-section" className="home-sixth-section">
        <SixthSection sixth={sixth} main_web_site_url={main_web_site_url} />
      </div>

      <div id="home-seventh-section" className="home-seventh-section">
        <SeventhSection main_web_site_url={main_web_site_url} />
      </div>

      <Footer />

    </div>
  )
}

export default TPMIndexHOC(HomePage, { noFooter: true });
