import React from 'react';
import PropTypes from 'prop-types';
import s from './Widget.module.scss';
import Loader from '../Loader/Loader'; 

class Widget extends React.Component {
  static propTypes = {
    title: PropTypes.node,
    className: PropTypes.string,
    children: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.node),
      PropTypes.node,
    ]),
    bodyClass: PropTypes.string,
    fetchingData: PropTypes.bool
  };

  static defaultProps = {
    title: null,
    className: '',
    children: [],
    bodyClass: '',
    fetchingData: false
  };

  constructor(prop) {
    super(prop);
    this.state = {
      randomId: Math.floor(Math.random() * 100),
    };
  }

  render() {
    const {
      title,
      className,
      children,
      bodyClass,
      fetchingData,
      ...attributes
    } = this.props;
    return (
      <section
        className={['widget', s.widget, className].join(' ')}
        ref={(widget) => { this.el = widget; }} {...attributes}
      >
        {
          title && (
            typeof title === 'string'
              ? <h5 className={s.title}>{title}</h5>
              : <header className={s.title}>{title}</header>
          )
        }
        <div className={`${s.widgetBody} widget-body ${bodyClass}`}>
          {fetchingData ?  <Loader className={s.widgetLoader} size={40}/> : children}
        </div>
      </section>
    );
  }
}

export default Widget;