import React from 'react';
import { loadCSS } from 'fg-loadcss';
import FontfaceObserver from 'fontfaceobserver';

class FontLoader extends React.Component {
  static defaultProps = {
    fonts: [],
    render: () => {}
  };

  state = {
    loading: true,
    error: null,
    success: false,
  };

  componentDidMount() {
    this.props.fonts.map(font => loadCSS(font.url));

    Promise.all(
      this.props.fonts
        .map(font => font.font)
        .map(font => new FontfaceObserver(font).load())
    ).then(
      () => this.setState({ loading: false, success: true }),
      error => this.setState({ loading: false, error })
    );
  }

  render() {
    return this.props.render(this.state);
  }
}

export default FontLoader;