import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

//Array of pertinent beat titles and media links
let audioLinks = {
  "Q": {id: "Heater-1", src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"},
  "W": {id: "Heater-2", src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"},
  "E": {id: "Heater-3", src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"},
  "A": {id: "Heater-4", src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"},
  "S": {id: "Clap", src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"},
  "D": {id: "Open-HH", src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"},
  "Z": {id: "Kick-n-Hat", src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"},
  "X": {id: "Kick", src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"},
  "C": {id: "Closed-HH", src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"}
}

let powerObj = {
  poweredOn: true
}

const root = document.documentElement;
 root.addEventListener("keydown", (e) => {
    if (e.code.match(/[QWEASDZXC]/g)) {
          document.getElementById(audioLinks[e.key.toUpperCase()].id).click();
          if (powerObj.poweredOn) {
            document.getElementById(audioLinks[e.key.toUpperCase()].id).className = "drum-pad-keyPress"
          } else {
            document.getElementById(audioLinks[e.key.toUpperCase()].id).className = "drum-pad-off-keyPress"
          }
        }
  }
);
 root.addEventListener("keyup", (e) => {
    if (e.code.match(/[QWEASDZXC]/g)) {
          if (powerObj.poweredOn) {
            document.getElementById(audioLinks[e.key.toUpperCase()].id).className = "drum-pad"
          } else {
            document.getElementById(audioLinks[e.key.toUpperCase()].id).className = "drum-pad-off"
          }
        }
  }
);






 const PowerButton = (props) => {
  if (props.isTurnedOn) {
    return (
      <div id="power-button-group" onClick={props.handlePowerClick}>
          <div id="power">power</div>
            <div id="led">
          <div id="led-on"></div>
        </div>
        <div id="power-switch">
          <div id="power-switch-on"></div>
          <div id="power-switch-base"></div>
        </div>
      </div>
      )
} else {
  return (
      <div id="power-button-group" onClick={props.handlePowerClick}>
        <div id="power">power</div>
          <div id="led">
        <div id="led-off"></div>
      </div>
      <div id="power-switch">
        <div id="power-switch-off" ></div>
        <div id="power-switch-base"></div>
      </div>
  </div>
    )
}
}   

 
const Display = (props) => {
  if (props.isTurnedOn) {
    return (
    <div id="display">{props.display}</div>
    )
  } else {
    return (
    <div id="display"></div>
    )
  }
}

const MachineLabel = () => {
  return (
   <div id="machine-label">
    <span id="jays">Jay's</span>
    <span id="swaggy">Swaggy-BeatMaker</span>
    <span id="labelNumber">8999</span>
  </div>
  );
}





const PadButton = (props) => {
  
    const idVar = audioLinks[props.keyToPress].id;
    const audioSrc = audioLinks[props.keyToPress].src;
    if (props.isTurnedOn) {
      return (
          <button class="drum-pad" id={idVar} onClick={() => props.clickEvent(props.keyToPress, props.keyToPress)}>{props.keyToPress}
          <audio className="clip" id={props.keyToPress} src={audioSrc}></audio>
          </button>
      );
    } else {
      return (
          <button class="drum-pad-off" id={idVar}>{props.keyToPress}
          </button>
      );
    }
}




class DrumMachineApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isTurnedOn: true,
      displayText: 'Awesome Box'
    }
    this.handlePowerClick = this.handlePowerClick.bind(this);
    this.handleDisplayChange = this.handleDisplayChange.bind(this);
    this.handlePadClick = this.handlePadClick.bind(this);
    
    }

 
    handlePowerClick() {
          this.setState({
            isTurnedOn: !this.state.isTurnedOn
          })
          powerObj.poweredOn = !powerObj.poweredOn;
    }
  
     handlePadClick = (selection, id) => {
          let text = audioLinks[selection].id
          document.getElementById(id).play();
          this.handleDisplayChange(text);
          
     }
  
    handleDisplayChange(text) {
      this.setState({
        displayText: text
      })
    }
 

  
  
   render() {
    
     return (
    <>
         {this.state.isTurnedOn ? 
           <div id="display-container">
             <Display display={this.state.displayText}  isTurnedOn={this.state.isTurnedOn}/>
           </div>
             : <div id="display-off">
               <Display display={this.state.displayText}  isTurnedOn={this.state.isTurnedOn}/>
             </div>}
         
        
        <div id="knobs">
          <div id="bt-btn">
            <button class="backtrack"></button>
            <button class="backtrack"></button>
            <button class="backtrack"></button>
            <button class="backtrack"></button>
          </div>
        </div>
      <MachineLabel />
        <div id="button-bank">
          <PadButton keyToPress="Q" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="W" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="E" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="A" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="S" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="D" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="Z" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="X" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
          <PadButton keyToPress="C" displayText={this.state.displayText} clickEvent={this.handlePadClick} isTurnedOn={this.state.isTurnedOn}/>
        </div>
        <PowerButton isTurnedOn={this.state.isTurnedOn} handlePowerClick={this.handlePowerClick} />
    </>
      )
   }
}


//This renders the Drum Machine Parent App to the virtual DOM.
ReactDOM.render(<DrumMachineApp />, document.getElementById('drum-machine'));