import React, { Component } from 'react';

import TeamTablePanel from './team-table-panel.jsx';
import Card from '@material-ui/core/Card';

const teamData = require('../config/team-data.json');

const brightnessRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

export class TeamPanel extends Component {
  constructor(props) {
    super();
    this.state = { winWidth: 0 };
    this.updateDimensions = this.updateDimensions.bind(this);
    this.handleGotStandings = this.handleGotStandings.bind(this);
  }
  
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
    this.updateDimensions();
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
  
  updateDimensions() {
    this.setState({ winWidth: window.innerWidth });
  }
  
  handleGotStandings(recordSummary, standingSummary) {
    this.setState({recordSummary, standingSummary});
  }
  
  colorBrightness(hex) {
    const result = brightnessRegex.exec(hex);
    return result ? (0.2126*parseInt(result[1], 16) + 0.7152*parseInt(result[2], 16) + 0.0722*parseInt(result[3], 16)) : null;
  }
  
  render() {
    const {team} = this.props,
          state = this.state,
          winWidth = state.winWidth;
    
    let lighterColor = 'FFFFFF', darkerColor = '000000';
    
    const primaryBrightness = this.colorBrightness(team.color);
    const altBrightness = this.colorBrightness(team.altColor);
    console.log('color brightnesses', primaryBrightness, team.color, altBrightness, team.altColor, team);
    console.log('team panel contracts', team.league, team.slug, this.props.contracts)
    
    
    if (Math.max(primaryBrightness, altBrightness) < 50) {
      darkerColor = team.color;
    }
    else if (primaryBrightness > altBrightness) {
      lighterColor = team.color;// + 'b3';
      darkerColor = team.altColor;
    }
    else {
      lighterColor = team.altColor;// + 'b3';
      darkerColor = team.color;
    }
    
    return (
      <Card raised={true} style={{maxWidth: 1260, marginTop: 6, marginLeft: 'auto', marginRight: 'auto'}}>
        <div className="ResponsiveWrapper">
        	<div className="ClubhouseHeader w-100 overflow-hidden bb ph4 ClubhouseHeader--tabletPlus bg-clr-white brdr-clr-gray-10" style={{backgroundColor: '#' + lighterColor}}>
        		<div className="ClubhouseHeader__Container w-100 center flex items-center justify-between">
        			<div className="ClubhouseHeader__Main flex items-center pv3 justify-start">
        				<figure className="Image aspect-ratio--parent ClubhouseHeader__Logo flex-shrink-0">
        					<div className="RatioFrame aspect-ratio--1x1"></div>
        					<div className="Image__Wrapper aspect-ratio--child">
        						<img className="" alt={team.shortName} src={'https://a.espncdn.com/i/teamlogos/' + team.league + '/500/' + team.abbreviation + '.png'} />
        					</div>
        				</figure>
        				<div className="ClubhouseHeader__Main_Aside pl4 relative">
        					<h1 className="ClubhouseHeader__Name ttu flex items-start n2">
        						<span className="flex flex-wrap">
        							<span className="db pr3 nowrap">{team.location}</span>
        							<span className="db fw-bold">{team.shortName}</span>
        						</span>
        					</h1>
        					<div className="ClubhouseHeader__TeamDetails flex items-center mt3">
        						<ul className="list flex ClubhouseHeader__Record n8 ml4">
        							<li>{state.recordSummary}</li>
        							<li>{state.standingSummary}</li>
        						</ul>
        					</div>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>
        <div style={{paddingTop: (winWidth > 1024) ? 12 : 0, position: 'relative', zIndex: 1}}>
          <TeamTablePanel
            winWidth={winWidth}
            contracts={this.props.contracts[team.league][team.slug]}
            team={team}
            gotStandings={this.handleGotStandings}
            fetchPlayer={this.props.fetchPlayer}
            showTeam={this.props.showTeam}
            showGame={this.props.showGame}
          />
        </div>
      </Card>
    )
  }
}

export default TeamPanel;
