import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import { ReactComponent as Star } from '../../images/star.svg'
import { ReactComponent as Forks } from '../../images/forks.svg'
import styles from './Numbers.module.scss'

export default class Numbers extends PureComponent {
  static propTypes = {
    stargazers: PropTypes.object.isRequired,
    forkCount: PropTypes.number.isRequired,
    url: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired
  }

  state = {
    forks: this.props.forkCount,
    stars: this.props.stargazers.totalCount
  }

  url = 'https://oceanprotocol-github.now.sh'

  signal = axios.CancelToken.source()

  componentDidMount() {
    this.fetchNumbers()
  }

  componentWillUnmount() {
    this.signal.cancel()
  }

  fetchNumbers = async () => {
    try {
      const response = await axios({
        method: 'get',
        url: this.url,
        timeout: 10000, // 10 sec.
        headers: {
          'Content-Type': 'application/json'
        }
      })

      const repo = response.data
        .map((item) => {
          if (item.name === this.props.name) {
            return item
          }
        })
        .filter((n) => n)

      const { forks, stars } = repo

      // update state only when numbers have changed
      if (forks && forks !== this.props.forkCount) {
        this.setState({ forks })
      }

      if (stars && stars !== this.props.stargazers.totalCount) {
        this.setState({ stars })
      }
    } catch (error) {
      if (axios.isCancel(error)) {
        return null
      } else {
        console.log(error.message) // eslint-disable-line no-console
      }
    }
  }

  render() {
    const { url } = this.props
    const { forks, stars } = this.state

    return (
      <aside className={styles.repositorynumbers}>
        <a href={`${url}/stargazers`} title="Show Stargazers">
          <Star /> <span>{stars}</span>
        </a>
        {forks > 0 && (
          <a href={`${url}/network`} title="Show Forks">
            <Forks /> <span>{forks}</span>
          </a>
        )}
      </aside>
    )
  }
}