import React, { Component, Fragment } from 'react';

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

import AltImage from './alt-image.jsx';

const sports = [
  'baseball', 'football', 'basketball'
];

export default class AlternateAthleteSelector extends Component {
  constructor(props) {
    super();
    this.state = {
      altAnchorEl: null
    };
    
    this.handleAltClick = this.handleAltClick.bind(this);
    this.handleAltClose = this.handleAltClose.bind(this);
  }
  
  handleAltClick(ev) {
    ev.preventDefault();
    console.log('altclick', ev.currentTarget, ev.target);
    this.setState({altAnchorEl: ev.currentTarget || ev.target});
  }

  handleAltClose(ev) {
    ev.preventDefault();
    
    const choiceData = ev.currentTarget.dataset;
    console.log('altclose', choiceData, ev.currentTarget);
    this.setState({altAnchorEl: null});
    
    if (choiceData.hasOwnProperty('id')) {
      this.props.fetchPlayer(choiceData.id, choiceData.sport, choiceData.league);
      this.props.setAlts(null);
    }
  }
  
  render() {
    const alternateAthletes = this.props.altAthletes;
    const altAnchorEl = this.state.altAnchorEl;
    
    const altAthleteEls = (alternateAthletes) ? alternateAthletes.map((athlete, i) =>
      <MenuItem key={i} onClick={this.handleAltClose} data-id={athlete.id} data-sport={athlete.sport} data-league={athlete.league} className="search_results__item">
        <div className="search_results__link detailed">
          <div className="search_results__img headshot-sm athlete">
             <AltImage src={'https://a1.espncdn.com/combiner/i?img=/i/headshots/' + athlete.league + '/players/full/' + athlete.id + '.png&amp;w=80&amp;h=80&amp;scale=crop&amp;cquality=40'} />
          </div>
          <div className="search_results__details">
            <span className="search_results__label">{athlete.name}</span>
            <span className="search_results__cat">{athlete.league.toUpperCase()}</span>
          </div>
        </div>
      </MenuItem>
    ) : null;

    return(
      <div className="bottom-fixed-btn-wrap" style={{right: 24}}>
        <Button aria-controls="alt-athlete-menu" aria-haspopup="true" onClick={this.handleAltClick}>
          <svg focusable="false" viewBox="0 0 24 24" style={{width: '100%', height: '100%'}}>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" style={{filter: 'url(#dropshadow)'}}></path>
          </svg>
        </Button>
        <div className="search_results__suggestions search_results__suggestions--cat">
          <Menu
            id="alt-athlete-menu"
            anchorEl={altAnchorEl}
            keepMounted
            open={Boolean(altAnchorEl)}
            onClose={this.handleAltClose}
          >{altAthleteEls}</Menu>
        </div>
      </div>
    );
  }
};