import lottie from '../utils/lottie-light-min'
import PropTypes from 'prop-types'
import React from 'react'

export default class Lottie extends React.Component {
  componentDidMount() {
    const {
      options: {
        loop,
        autoplay,
        animationData,
        rendererSettings,
        segments
      },
      eventListeners
    } = this.props

    this.options = {
      container: this.el,
      renderer: 'svg',
      loop: loop !== false,
      autoplay: autoplay !== false,
      segments: segments !== false,
      animationData,
      rendererSettings
    }

    this.anim = lottie.loadAnimation(this.options)
    this.registerEvents(eventListeners)
  }

  shouldComponentUpdate(nextProps /* , nextState */) {
    /* Recreate the animation handle if the data is changed */
    if (this.options.animationData !== nextProps.options.animationData) {
      this.deRegisterEvents(this.props.eventListeners)
      this.destroy()
      this.options = { ...this.options, ...nextProps.options }
      this.anim = lottie.loadAnimation(this.options)
      this.registerEvents(nextProps.eventListeners)
      return true
    }
    return false
  }

  componentDidUpdate() {
    if (this.props.isStopped) {
      this.stop()
    } else if (this.props.segments) {
      this.playSegments()
    } else {
      this.play()
    }

    this.pause()
    this.setSpeed()
    this.setDirection()
  }

  componentWillUnmount() {
    this.deRegisterEvents(this.props.eventListeners)
    this.destroy()
    this.options.animationData = null
    this.anim = null
  }

  setSpeed() {
    this.anim.setSpeed(this.props.speed)
  }

  setDirection() {
    this.anim.setDirection(this.props.direction)
  }

  play() {
    this.anim.play()
  }

  playSegments() {
    this.anim.playSegments(this.props.segments)
  }

  stop() {
    this.anim.stop()
  }

  pause() {
    if (this.props.isPaused && !this.anim.isPaused) {
      this.anim.pause()
    } else if (!this.props.isPaused && this.anim.isPaused) {
      this.anim.pause()
    }
  }

  destroy() {
    this.anim.destroy()
  }

  registerEvents(eventListeners) {
    eventListeners.forEach((eventListener) => {
      this.anim.addEventListener(eventListener.eventName, eventListener.callback)
    })
  }

  deRegisterEvents(eventListeners) {
    eventListeners.forEach((eventListener) => {
      this.anim.removeEventListener(eventListener.eventName, eventListener.callback)
    })
  }

  handleClickToPause = () => {
    // The pause() method is for handling pausing by passing a prop isPaused
    // This method is for handling the ability to pause by clicking on the animation
    if (this.anim.isPaused) {
      this.anim.play()
    } else {
      this.anim.pause()
    }
  }

  render() {
    const {
      width,
      height,
      ariaRole,
      ariaLabel,
      isClickToPauseDisabled,
      title
    } = this.props

    const getSize = (initial) => {
      let size

      if (typeof initial === 'number') {
        size = `${initial}px`
      } else {
        size = initial || '100%'
      }

      return size
    }

    const lottieStyles = {
      width: getSize(width),
      height: getSize(height),
      overflow: 'hidden',
      margin: '0 auto'
    }

    const onClickHandler = isClickToPauseDisabled ? () => null : this.handleClickToPause

    return (
      // Bug with eslint rules https://github.com/airbnb/javascript/issues/1374
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      <div
        ref={(c) => {
          this.el = c
        }}
        style={lottieStyles}
        onClick={onClickHandler}
        title={title}
        role={ariaRole}
        aria-label={ariaLabel}
        tabIndex="0"
      />
    )
  }
}

Lottie.propTypes = {
  eventListeners: PropTypes.arrayOf(PropTypes.object),
  options: PropTypes.object.isRequired,
  height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
  width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
  isStopped: PropTypes.bool,
  isPaused: PropTypes.bool,
  speed: PropTypes.number,
  segments: PropTypes.arrayOf(PropTypes.number),
  direction: PropTypes.number,
  ariaRole: PropTypes.string,
  ariaLabel: PropTypes.string,
  isClickToPauseDisabled: PropTypes.bool,
  title: PropTypes.string
}

Lottie.defaultProps = {
  eventListeners: [],
  isStopped: false,
  isPaused: false,
  speed: 1,
  ariaRole: 'button',
  ariaLabel: 'animation',
  isClickToPauseDisabled: false,
  title: ''
}

@@ -18,15 +18,8 @@
 m '.
-./utils
 /lot
@@ -33,16 +33,16 @@
 ht-min'%0A
+
 import P
@@ -566,25 +566,24 @@
 tings%0A    %7D%0A
-%0A
     this.ani
@@ -617,24 +617,24 @@
 is.options)%0A
+
     this.reg
@@ -670,733 +670,8 @@
  %7D%0A%0A
-  shouldComponentUpdate(nextProps /* , nextState */) %7B%0A    /* Recreate the animation handle if the data is changed */%0A    if (this.options.animationData !== nextProps.options.animationData) %7B%0A      this.deRegisterEvents(this.props.eventListeners)%0A      this.destroy()%0A      this.options = %7B ...this.options, ...nextProps.options %7D%0A      this.anim = lottie.loadAnimation(this.options)%0A      this.registerEvents(nextProps.eventListeners)%0A      return true%0A    %7D%0A    return false%0A  %7D%0A%0A  componentDidUpdate() %7B%0A    if (this.props.isStopped) %7B%0A      this.stop()%0A    %7D else if (this.props.segments) %7B%0A      this.playSegments()%0A    %7D else %7B%0A      this.play()%0A    %7D%0A%0A    this.pause()%0A    this.setSpeed()%0A    this.setDirection()%0A  %7D%0A%0A
   co

Remove unused lifecycles on about-us page