import React, { memo, useEffect, useState } from 'react';
import { Button } from 'antd';
import './index.scss';

import circle from '../img/1-circle.png';
import code1 from '../img/1-code.png';
import codeBed from '../img/1-code-bed.png';
import glass from '../img/1-glass.png';
import logo from '../img/1-logo.png';
import box1 from '../img/1-box1.png';
import box2 from '../img/1-box2.png';
import box3 from '../img/1-box3.png';
import box4 from '../img/1-box4.png';

import text1 from '../img/1-text1.png';
import text2 from '../img/1-text2.png';
import text3 from '../img/1-text3.png';
import text4 from '../img/1-text4.png';

function FirstSection({ first }) {

  const [circulation, setCirculation] = useState('');

  useEffect(() => {
    const playGlass = document.getElementById("playGlass");
    playGlass.addEventListener("webkitAnimationEnd", secondAnimation);
    return () => {
      setCirculation('');
      playGlass.removeEventListener("webkitAnimationEnd",secondAnimation);
    };
  }, []);
  
  function secondAnimation(){
    setCirculation('circulation');
  }

  useEffect(() => {
    setCirculation('');
  }, [first]);


  function goNext(){
    window.scrollTo({
      letf:0,
      top:document.querySelector(".home-second-section").offsetTop,
      behavior:"smooth"
    }
      )
  }

  return (
    <div className={`grid-picture ${first ? "active" : ""}`}>
      <div className="homepage-main website-content">

        <div className="website">
          <h3 className="website-title">红山开源</h3>
          <div className="website-vision">
            <span>群智共享</span>
            <span>开源开放</span>
            <span>协同创新</span>
            <span>择优孵化</span>
          </div>
          <div className="website-des">红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
          </div>
          {/* <Button className="website-more homepage-btn" type="primary" onClick={goNext}>了解详情</Button> */}
        </div>

        <div className={`play-img ${circulation}`}>
          <img alt="images-not_found" className="play-text3" src={text3}></img>
          <img alt="images-not_found" className="play-text4" src={text4}></img>
          <img alt="images-not_found" className="play-logo" src={logo}></img>
          <img alt="images-not_found" id="playGlass" className="play-glass" src={glass}></img>
          <img alt="images-not_found" className="play-code-bed" src={codeBed}></img>
          <img alt="images-not_found" className="play-code1" src={code1}></img>
          <img alt="images-not_found" className="play-circle" src={circle}></img>
          <div className="play-circle-circle1"></div>
          <div className="play-circle-circle2"></div>
          <div className="play-circle-circle3"></div>
          <img alt="images-not_found" className="play-box4" src={box4}></img>
          <img alt="images-not_found" className="play-box3" src={box3}></img>
          <img alt="images-not_found" className="play-box2" src={box2}></img>
          <img alt="images-not_found" className="play-box1" src={box1}></img>
          <img alt="images-not_found" className="play-text1" src={text1}></img>
          <img alt="images-not_found" className="play-text2" src={text2}></img>

        </div>
      </div>

      <svg className="waves"
        viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
        <defs>
          <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g className="parallax">
          {/* <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
            <use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.4)" />
            <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> */}
          {/* <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" /> */}
          <use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
          <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
          <use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
        </g>
      </svg>

    </div>
  )
}

export default memo(FirstSection);