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

const randomKey = () => Math.random().toString(36).substring(7);

export class Findify extends Component{
  container = undefined;
  findifyKey = undefined;

  state = {
    isLoaded: false,
  }

  static propTypes = {
    widgetKey: PropTypes.string,
    type: PropTypes.oneOf(['search', 'recommendation', 'autocomplete']),
    options: PropTypes.object
  }

  componentWillUnmount() {
    if (this.findifyKey) {
      window.findify.widgets.detach(this.findifyKey);
    }
  }

  handleFirstResponse = (items) => {
    this.setState({ isLoaded: true });
    window.findify.widgets.get(this.findifyKey).agent.off(this.handleFirstResponse)
  }

  register = (container) => {
    if (this.container || !container) return;
    this.container = container;
    this.renderFindify(container);
  }

  renderFindify = (container) => {
    const { widgetKey, type, options } = this.props;
    this.findifyKey = widgetKey || randomKey();
    window.findify.widgets.attach(container, type, { ...options, widgetKey: this.findifyKey });
    window.findify.widgets.get(this.findifyKey).agent.on('change:items', this.handleFirstResponse);
  }

  render() {
    const { isLoaded } = this.state;

    return (
      <>
        { !isLoaded && <div className='YOUR_LOADER' /> }
        <div ref={this.register} />
      </>
    )
  }
}