content: import React from 'react';
  import { finishMap, eventTypeShortenerMap } from '@/js/util';
  import { getEventOverview } from '@/js/api';
  import { linkAlliance, linkEvent } from '../../js/links';
  
  export default class EventAppearance extends React.Component {
    constructor(props) {
      super(props);
      this.state = { expanded: false, events: {} };
      this.expand = this.expand.bind(this);
    }
  
    expand() {
      const div = document.getElementById(`toggle-ea-${this.props.event.event.key}`);
      div.classList.toggle('fa-angle-down');
      div.classList.toggle('fa-angle-up');
      this.setState({ expanded: !this.state.expanded });
    }
  
    render() {
      const ea = this.props.event;
  
      let expandedCard = null;
      if (this.state.expanded) {
        if (!Object.prototype.hasOwnProperty.call(this.state.events, ea.event.key)) {
          getEventOverview(ea.event.key).then((json) => {
            this.state.events[ea.event.key] = json;
            this.forceUpdate();
          });
        }
      }
  
      if (Object.prototype.hasOwnProperty.call(this.state.events, ea.event.key)
          && this.state.expanded) {
        const awardTags = ea.awards.map(a => (
          <span
            className={`tag ${a.blue_banner ? 'is-link' : ''}`}
            key={`${a.event}-${a.award_type}-${ea.id}`}
          >
            {a.specific_name}
          </span>
        ));
  
        let elimAlliance = null;
        if (ea.elim_alliance) {
          elimAlliance = linkAlliance(ea.elim_alliance);
        }
        let lostTo = null;
        if (ea.lost_to) {
          lostTo = linkAlliance(ea.lost_to);
        }
        let winner = null;
        if (this.state.events[ea.event.key].winner && !ea.won_event) {
          winner = linkAlliance(this.state.events[ea.event.key].winner);
        }
  
        expandedCard = (
          <div style={{ borderTop: '1px solid lightgrey', paddingTop: '20px' }}>
            {ea.awards.length > 0 &&
            <div className={'columns is-mobile'} >
              <div className={'column'}>
                Awards
              </div>
              <div className={'column is-narrow'}>
                <div className={'tags'}>
                  {awardTags}
                </div>
              </div>
            </div>}
            {elimAlliance &&
            <div className={'columns is-mobile'}>
              <div className={'column'}>
                Playoff Alliance
              </div>
              <div className={'column is-narrow'}>
                {elimAlliance}
              </div>
            </div>
            }
            {lostTo &&
            <div className={'columns is-mobile'}>
              <div className={'column'}>
                Lost To
              </div>
              <div className={'column is-narrow'}>
                {lostTo}
              </div>
            </div>
            }
            {winner &&
            <div className={'columns is-mobile'}>
              <div className={'column'}>
                Winning Alliance
              </div>
              <div className={'column is-narrow'}>
                {winner}
              </div>
            </div>
            }
          </div>
        );
      }
  
  
      return (
        <div className={'box'}>
          <div className={'columns is-mobile'}>
            <div className={'column'}>
              <p className={'title is-4'}>
                <span
                  className="tag is-small is-light"
                  style={{ marginRight: '0.5em', marginBottom: '0.35em' }}
                >
                  {eventTypeShortenerMap[ea.event.event_type]}
                </span>
                {linkEvent(ea.event.key, ea.event.short_name)}
              </p>
              {ea.rank &&
              <p className={'subtitle is-6'}>
                Rank {ea.rank} / {ea.num_teams}
              </p>
              }
            </div>
  
            <div className={'column is-narrow'}>
              <p className={'title is-4 has-text-right'}>{ea.won}-{ea.lost}-{ea.tied}</p>
              <p className={'subtitle is-6 has-text-right'}>
                {ea.won_event ? 'Winner' : finishMap[ea.finish]}
                <a onClick={this.expand} role={'button'}>
                  <span className="icon">
                    <i className="fa fa-angle-down" id={`toggle-ea-${ea.event.key}`} />
                  </span>
                </a>
              </p>
            </div>
          </div>
          {expandedCard}
        </div>
      );
    }
  }
  