/* IN THIS PROJECT I LEARNT HOW TO..

  - Use `for` loops in React
  - Pass through a parent function to a child component
  - Play audio clips
  - Handle key presses from the keyboard
  
  
  - It's not pretty, I know. But I'm focusing on learning code and not visual design right now.
  
*/
const DRUM_PAD_INFO = [
  {
    id: "synth A",
    innerText: 'Q',
    keyCode: 81,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" 
  },
  {
    id: "synth B", 
    innerText: 'W',
    keyCode: 87, 
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
  },
  {
    id: "keyboard", 
    innerText: "E", 
    keyCode: 69, 
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
  },
  {
    id: "guitar", 
    innerText: "A", 
    keyCode: 65,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
  },
  {
    id: "clap", 
    innerText: "S", 
    keyCode: 83,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
  },
  {
    id: "cymbal", 
    innerText: "D", 
    keyCode: 68,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
  },
  {
    id: "kick", 
    innerText: "Z", 
    keyCode: 90,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
  },
  {
    id: "doof", 
    innerText: "X", 
    keyCode: 88,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
  },
  {
    id: "tick", 
    innerText: "C", 
    keyCode: 67,
    audio: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
  }
];

let audioClipName = '';

class DrumPad extends React.Component {
  constructor(props) {
    super(props);
    this.playMusic = this.playMusic.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  
  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }
  
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }
  
  playMusic() {
    let audio = document.getElementById(this.props.innerText);
    audio.play();
    this.props.updateDisplay(this.props.id);
  }
  
  handleKeyPress(event) {
    if (event.keyCode === this.props.keyCode) {
      this.playMusic();
    }
  }
  
  render() {
    return (
      <div>
        <button className='drum-pad' id={this.props.id} onClick={this.playMusic}>{this.props.innerText}
          <audio className='clip' id={this.props.innerText} src={this.props.audio}></audio>
        </button>
      </div>
    );
  }
}

DrumPad.defaultProps = {
  id: "lonerly",
  innerText: "boo hoo",
  audio: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
  keyCode: 81
}

class DrumMachine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clipName: '...'
    }
    this.updateClipName = this.updateClipName.bind(this);
  }
  
  updateClipName(name) {
    this.setState({
      clipName: name
    });
  }
  
  render() {
    let drumPads = [];
    for (let i=0; i<DRUM_PAD_INFO.length; i++) {
      drumPads.push(<DrumPad 
                      {...DRUM_PAD_INFO[i]}
                      updateDisplay = {this.updateClipName} />
                   );
    }
    
    return (
      <div id="drum-machine">
        <div id="display">
          <div id='clip-name'> {this.state.clipName} </div>
          <div id='drum-pads'> {drumPads} </div>
        </div>
      </div>
    );
  };
}

ReactDOM.render(<DrumMachine />, document.getElementById("app"));