import React from "react";
import "./App.css";
import pig from "./img/pig.jpg";
import pigsound1 from "./music/1.mp4";
import pigsound2 from "./music/2.mp4";
import pigsound3 from "./music/3.mp4";
// import MIDISounds from "midi-sounds-react";

const musicButton = [pigsound1, pigsound2, pigsound3];
let soundNumber = 1;
class App extends React.Component {
  state = {
    music: musicButton,
    sound: soundNumber
  };

  onClick = e => {
    console.log(this.state.sound);
    this.state.sound = Math.floor(Math.random() * this.state.music.length);
    console.log(this.state.sound);
    if (this.audio) {
      this.audio.pause();
    }
    this.audio = new Audio(e.target.dataset.url);
    this.audio.play();
    console.log(this.state.music[`${this.state.sound}`]);
  };

  render() {
    return (
      <div className="App-header">
        <img src={pig} />
        {/* {.this.state.music.map(n => ( */}
        <button
          onClick={this.onClick}
          data-url={this.state.music[`${this.state.sound}`]}
          key={this.state.sound}
        >
          Где свиньи?
        </button>
      </div>
    );
  }
}
export default App;