//<MyLottie path='./living-bg.json' style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 2 }}/>
import React from 'react';
import lottie from 'lottie-web';

class MyLottie extends React.Component {

  componentDidMount() {
    this.renderLottie()
  }

  renderLottie() {
    const { path } = this.props;
    if (path) {
      this.timer = setTimeout(() => {
        this.lottie = lottie.loadAnimation({
          container: document.getElementById('lottie'), //this.lottieRef, // the dom element that will contain the animation
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path, // the path to the animation json
        });
      }, 300);
    }
  }

  componentWillUnmount() {
    if (this.lottie) {
      this.lottie.destroy();
    }
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }

  closeLottie() {
    if (this.lottie) {
      this.lottie.destroy();
    }
  }

  testLog() {
    console.log(this.state);
  }

  render() {
    return (
      <div
        ref={ref => (this.lottieRef = ref)}
        id="lottie"
        style={this.props.style || {}}
      ></div>
    );
  }
}

export default MyLottie;

MyLottie.defaultProps = {
  path: ''
}