import React, { Component, PropTypes } from 'react';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import UCdefaultTheme from '../../themes/DefaultTheme';

import './TwitterTimeline.css';

/**
 * Twitter timeline component.
 * <<Requires widget.js external dependency>>
 */
/*eslint-disable */
export default class TwitterTimeline extends Component {

  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  componentDidMount() {
    if (!this.loaded) {
      this.loaded = true;
      twttr.widgets.load(document.getElementById(this.props.id));
    }
  }

  render() {
    const {id, title, username} = this.props;
    const href = `https://twitter.com/${username}`;

    return (
        <div style={{marginTop: '10px'}} ref="parent">
          <a id={id} className= "twitter-timeline" data-widget-id={id} data-chrome="noborders noheader nofooter" href= {href}>{title}</a>
        </div>
    );
  }
}

TwitterTimeline.propTypes = {
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  username: PropTypes.string.isRequired,
};

TwitterTimeline.childContextTypes = {
  muiTheme: PropTypes.object,
};