import React, { Component } from 'react';

export default class DynamicBanner extends Component {
  static displayName = 'DynamicBanner';

  state = {
    rotateX: 0,
    width: Math.min(window.innerWidth, 1150) - 80,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState(
        {
          rotateX: -5,
        },
        () => {
          setTimeout(() => {
            this.setState({
              rotateX: 0,
            });
          }, 1500);
        }
      );
    }, 80);
    window.addEventListener('resize', this.resize);
  }

  resize = () => {
    this.setState({
      width: Math.min(window.innerWidth, 1150) - 80,
    });
  };

  handleMouseEnter = () => {
    const ele = document.getElementById('bannerBox');
    ele.addEventListener('mousemove', this.mouseMoveListener);
  };
  componentWillUnmount() {
    const ele = document.getElementById('bannerBox');
    if (ele) {
      ele.removeEventListener('mousemove', this.mouseMoveListener);
    }
    window.removeEventListener('resize', this.resize);
  }

  mouseMoveListener = (event) => {
    const ele = document.getElementById('bannerBox');
    const thisPX = ele.offsetLeft;
    const thisPY = ele.offsetTop;
    const boxWidth = ele.offsetWidth;
    const boxHeight = ele.offsetHeight;
    const mouseX = event.pageX - thisPX;
    const mouseY = event.pageY - thisPY;
    let X;
    let Y;
    if (mouseX > boxWidth / 2) {
      X = mouseX - boxWidth / 2;
    } else {
      X = mouseX - boxWidth / 2;
    }
    if (mouseY > boxHeight / 2) {
      Y = boxHeight / 2 - mouseY;
    } else {
      Y = boxHeight / 2 - mouseY;
    }
    ele.style.transform = `rotateY(${X / 50}deg) rotateX(${Y / 50}deg)`;
  };

  handleMouseLeave = () => {
    const ele = document.getElementById('bannerBox');
    ele.style.transform = 'rotateY(0deg) rotateX(0deg)';
  };

  render() {
    const { rotateX, width } = this.state;
    return (
      <div className="dynamic-banner" style={styles.dynamicBanner}>
        <div
          className="banner-box"
          style={{
            ...styles.bannerBox,
            transform: `rotateY(0deg) rotateX(${rotateX}deg)`,
            width: width * 0.8,
            height: 714 / 982 * width * 0.8,
          }}
          id="bannerBox"
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
        >
          <span className="image" style={styles.image} />
        </div>
      </div>
    );
  }
}

const styles = {
  dynamicBanner: { perspective: '800px' },
  bannerBox: {
    position: 'relative',
    width: `${982 * 0.8}px`,
    height: `${714 * 0.8}px`,
    margin: '0 auto',
    background:
      'url(https://gw.alicdn.com/tfs/TB1mfG4cmBYBeNjy0FeXXbnmFXa-1964-1424.png) center no-repeat',
    backgroundSize: '100% 100%',
    borderRadius: '10px',
    transformStyle: 'preserve-3d',
    transformOrigin: '50% 50%',
    transform: 'rotateY(0deg) rotateX(0deg)',
  },
  image: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    bottom: '0',
    left: '0',
    background:
      'url(https://gw.alicdn.com/tfs/TB1dXNqckyWBuNjy0FpXXassXXa-1964-1424.png) center no-repeat',
    backgroundSize: '95% 95%',
    transform: 'translateZ(40px)',
  },
  slogan: {
    position: 'absolute',
    top: '20%',
    right: '10%',
    fontSize: '30px',
    color: '#fff',
    textAlign: 'right',
    fontWeight: 'lighter',
    transform: 'translateZ(20px)',
  },
  copyright: {
    position: 'absolute',
    bottom: '10%',
    right: '10%',
    fontSize: '10px',
    color: '#fff',
    textAlign: 'right',
    fontWeight: 'lighter',
    transform: 'translateZ(0px)',
  },
};