import React from 'react';
import './index.less';

// import bgColor from './imgs/bg-color-1.png';
import bg1 from './imgs/bg1.png';
import bgEmpty from './imgs/bg1-empty.png';
import bg2 from './imgs/bg2.png';
import bg3 from './imgs/bg3.png';
import moon from './imgs/moon.png';
import mountain1 from './imgs/mountain1.png';
import mountain2 from './imgs/mountain2.png';
import mountain3 from './imgs/mountain3.png';
import hillside1 from './imgs/hillside1.png';
import hillside2 from './imgs/hillside2.png';
import hillside3 from './imgs/hillside3.png';
import meteor1 from './imgs/meteor1.png';
import meteor2 from './imgs/meteor2.png';
import meteor3 from './imgs/meteor3.png';
import meteor4 from './imgs/meteor4.png';
import meteor5 from './imgs/meteor5.png';
import star1 from './imgs/star1.png';
import star2 from './imgs/star2.png';
import star3 from './imgs/star3.png';
import star4 from './imgs/star4.png';

export default class PageContent extends React.Component {
  state = { aniRight: 0 };

  componentDidMount() {
    const aniList = document.querySelectorAll('.element');
    aniList.forEach(item => {
      item.style.opacity = 0;
      item.addEventListener('animationend', e => {
        e.target.style.opacity = 1;
      });
    });
    window.addEventListener('resize', () => this.autoRight());
    this.autoRight();
  }

  componentWillReceiveProps() {
  }

  autoRight = () => {
    const width = document.body.clientWidth;
    if (width >= 1920) {
      this.setState({ aniRight: 0 });
      return;
    }
    if (width <= 1280) {
      this.setState({ aniRight: '-15vh' });
      return;
    }
    const temp = 15 - Math.ceil((width - 1280) / 42);
    this.setState({ aniRight: `-${temp}vh` });
  }

  render() {
    return (
      <div className="animate-wrap">
        <div className="animate-content" style={{ right: this.state.aniRight }}>
          {/* <div className="bg-color"><img src={bgColor} alt="bgColor" /></div> */}
          <div className="bg-0 element ani-right"><img src={bg1} alt="bg0" /></div>
          <div className="bg-1 element ani-right">
            <div className="triangle"><div className="triangle-content" /></div>
            <img src={bgEmpty} alt="bg1" />
          </div>
          <div className="bg-2 element ani-left"><img src={bg2} alt="bg2" /></div>
          <div className="bg-3 element ani-opacity"><img src={bg3} alt="bg3" /></div>
          {/* <div className="moon element ani-moon"><img src={moon} alt="moon" /></div> */}
          <div className="moon element ani-top-new"><img src={moon} alt="moon" /></div>
          <div className="meteor">
            <div className="meteor-1 element ani-move"><img src={meteor1} alt="meteor1" /></div>
            <div className="meteor-2 element ani-move1"><img src={meteor2} alt="meteor2" /></div>
            <div className="meteor-3 element ani-move2"><img src={meteor3} alt="meteor3" /></div>
            <div className="meteor-4 element ani-move3"><img src={meteor4} alt="meteor4" /></div>
            <div className="meteor-5 element ani-move-long"><img src={meteor5} alt="meteor5" /></div>
            <div className="meteor-6 element ani-move4"><img src={meteor1} alt="meteor1" /></div>
            <div className="meteor-7 element ani-move5"><img src={meteor2} alt="meteor2" /></div>
            <div className="meteor-8 element ani-move6"><img src={meteor3} alt="meteor3" /></div>
            <div className="meteor-9 element ani-move7"><img src={meteor4} alt="meteor4" /></div>
            <div className="meteor-10 element ani-move-long2"><img src={meteor5} alt="meteor5" /></div>
          </div>
          <div className="mountain">
            {/* <div className="mountain-1 element ani-top-m-1"><img src={mountain1} alt="mountain1" /></div>
            <div className="mountain-3 element ani-top-m-2"><img src={mountain3} alt="mountain3" /></div>
            <div className="mountain-2 element ani-top-m-3"><img src={mountain2} alt="mountain2" /></div> */}
            <div className="mountain-1 element ani-top-new5"><img src={mountain1} alt="mountain1" /></div>
            <div className="mountain-3 element ani-top-new6"><img src={mountain3} alt="mountain3" /></div>
            <div className="mountain-2 element ani-top-new4"><img src={mountain2} alt="mountain2" /></div>
          </div>
          <div className="hillside">
            {/* <div className="hillside-3 element ani-top"><img src={hillside3} alt="hillside3" /></div>
            <div className="hillside-1 element ani-top-long"><img src={hillside1} alt="hillside1" /></div>
            <div className="hillside-2 element ani-top"><img src={hillside2} alt="hillside2" /></div> */}
            <div className="hillside-3 element ani-top-new3"><img src={hillside3} alt="hillside3" /></div>
            <div className="hillside-1 element ani-top-new2"><img src={hillside1} alt="hillside1" /></div>
            <div className="hillside-2 element ani-top-new1"><img src={hillside2} alt="hillside2" /></div>
          </div>
          <div className="star">
            <div className="star-1 element ani-flash"><img src={star1} alt="star1" /></div>
            <div className="star-2 element ani-flash1"><img src={star2} alt="star2" /></div>
            <div className="star-3 element ani-flash2"><img src={star3} alt="star3" /></div>
            <div className="star-4 element ani-flash3"><img src={star4} alt="star4" /></div>
          </div>
        </div>
        <div className="layer" />
      </div>
    );
  }
}