const sounds = [
  {
    name: 'Heater-1',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
    letter: 'Q',
    keycode: 113
  },
  {
    name: 'Heater-2',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3',
    letter: 'W',
    keycode: 119
  },
  {
    name: 'Heater-3',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
    letter: 'E',
    keycode: 101
  },
  {
    name: 'Heater-4',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
    letter: 'A',
    keycode: 97
  },
  {
    name: 'Clap',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',
    letter: 'S',
    keycode: 115
  },
  {
    name: 'Open-HH',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
    letter: 'D',
    keycode: 100
  },
  {
    name: 'Kick-n-Hat',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
    letter: 'Z',
    keycode: 122
  },
  {
    name: 'Kick',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
    letter: 'X',
    keycode: 120
  },
  {
    name: 'Closed-HH',
    location: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',
    letter: 'C',
    keycode: 99
  },
];

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      switchOff: false,
      currentLetter: '',
      keyCode: undefined
    };  
    this.handleSound = this.handleSound.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.playSound = this.playSound.bind(this);
    this.switchOff = this.switchOff.bind(this);
  }
  
  componentDidMount(){
    window.addEventListener('keypress', this.handleKeyPress);
  }
  
  handleKeyPress = async (event) => {
    let keyCode = event.keyCode;
    await this.setState({ keyCode: keyCode });
    this.playSound();
  }
  
  handleSound = async (e) => {
    // Set current letter in state to match the button pressed
    const currentLetter = e.target.id;
    // Set currentLetter in state
    await this.setState({ currentLetter: currentLetter }); 
    this.playSound();
  }
  
  playSound() {
    // Loop over sounds array, finding matching sound object and play associated sound 
    if(this.state.switchOff === false) {
      sounds.forEach((sound) => {
        if(sound.letter === this.state.currentLetter || sound.keycode === this.state.keyCode){
        let drumSound = new Audio(sound.location); 
        document.getElementById(sound.letter).classList.add('playing');
        setTimeout(() => {
          document.getElementById(sound.letter).classList.remove('playing');
        }, 200);
        drumSound.play(); 
        document.querySelector('.displayScreen').innerHTML=`${sound.name}`;
      }
    });   
   }
  }

switchOff() {
  this.setState({ switchOff: !this.state.switchOff });
  
  if(this.state.switchOff === false){
    console.log('its off');
    document.querySelector('.displayScreen').classList.remove('displayScreenOn');
    document.querySelector('.displayScreen').classList.add('displayScreenOff');
    document.getElementById('drum-machineOff').classList.add('drum-machineOff');
    document.querySelector('.displayScreen').innerHTML='';
  } else {
    document.querySelector('.displayScreen').classList.add('displayScreenOn');
    document.querySelector('.displayScreen').classList.remove('displayScreenOff');
    document.getElementById('drum-machineOff').classList.remove('drum-machineOff');
  }
}
    
  render() {
    return (
      <div>
        <div id="drum-machineOff"></div>
        <div id="drum-machine">
          <div id="drum-keys">
            {sounds.map((sound) => (
            // <audio src={sound.location} className="clip" id={sound.letter}></audio> was within button
              <button 
               onClick={this.handleSound} 
               id={sound.letter}
               className="drum-pad"
             >
             {sound.letter}
            </button>
            ))}
          </div>
          <div id="display">
            <div class="displayScreen displayScreenOn"></div>
            <div id="onButton">
              <span>On</span>
              <label class="switch">  
                <input type="checkbox" onClick={this.switchOff}></input>
              <span class="slider"></span>
              </label>
            Off</div>
            <h1>Drum Machine</h1>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));