import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { connect } from 'react-redux';

import Nanobar from 'nanobar';

import './Loader.scss';

export class LoaderComponent extends Component {
  componentDidMount() {
    const opt = {
      id: 'bar-main',
      target: document.getElementById('nanobar'),
    };

    this.nanobar = new Nanobar(opt);

    // this.nanobar.go(10);
  }

  componentDidUpdate() {
    const { go } = this.props;
    this.nanobar.go(go);
  }

  render() {
    return <div id="nanobar" />;
  }
}


LoaderComponent.propTypes = {
  go: PropTypes.number.isRequired,
};

export default connect(
  (state) => {
    switch (state.annotations.isFetching) {
      case true:
        return { go: 50 };

      case false:
        return { go: 100 };
      default:
        return {};
    }
  },
)(LoaderComponent);