text: /* eslint-env browser */
  import "./audioRecording.css" ;
  import React from 'react';
  import Postword from "../postWord/PostWord.js"
  //import Bird from "./sounds/birds.mp3"
  const audioType = 'audio/*';
  
  
  class RecordingAPI extends React.Component {
    constructor(props) {
      super(props);
      this.deleteAudio = this.deleteAudio.bind(this);
      this.state = {
        recording: false,
        audios: [],
        audioRecorder: this.props.audioRecorded
      };
    }
  
    async componentDidMount() {
      const stream = await navigator.mediaDevices.getUserMedia({audio: true});
      // show it to user
      this.audio.src = window.URL.createObjectURL(stream);
      this.audio.play();
      // init recording
      this.mediaRecorder = new MediaRecorder(stream);
      // init data storage for video chunks
      this.chunks = [];
      // listen for data from media recorder
      this.deleteAll=this.deleteAll.bind(this) ;
      this.mediaRecorder.ondataavailable = e => {
        if (e.data && e.data.size > 0) {
          this.chunks.push(e.data);
        }
      };
    }
  
    startRecording(e) {
      e.preventDefault();
      // wipe old data chunks
      this.chunks = [];
      // start recorder with 10ms buffer
      this.mediaRecorder.start(10);
      // say that we're recording
      this.setState({recording: true});
    }
  
    stopRecording(e) {
      e.preventDefault();
      // stop the recorder
      this.mediaRecorder.stop();
      // say that we're not recording
      this.setState({recording: false});
      // save the video to memory
      this.saveAudio();
  
    }
  
    saveAudio() {
      // convert saved chunks to blob
      const blob = new Blob(this.chunks, {type: audioType});
      // generate video url from blob
      const audioURL = window.URL.createObjectURL(blob);
      // append videoURL to list of saved videos for rendering
      const audios = this.state.audios.concat([audioURL]);
      this.setState({audios});
        this.setState({audioRecorded : audios})
    }
  
    deleteAudio(audioURL) {
      // filter out current videoURL from the list of saved videos
      const audios = this.state.audios.filter(a => a !== audioURL);
      this.setState({audios});
    }
  
    deleteAll(){
        this.setState({audios : []})
    }
  
    render() {
      const {recording, audios} = this.state;
  
      return (
        <div className="camera">
          <audio
  
  
            style={{width: 400}}
            ref={a => {
              this.audio = a;
            }}>
           <p>Audio stream not available. </p>
          </audio>
          <div id="flexRecord">
  
            {!recording && <button  id="record" onClick={e => this.startRecording(e)}> <span id="recordword"> Record </span> <div id="circle"> </div></button>}
  
            {recording && <button id="stop" onClick={e => this.stopRecording(e)}> <span id="recordword">Stop  </span></button>}
          </div>
          <div>
            <h3 id="recordList">Recorded audios: </h3>
            {audios.map((audioURL, i) => (
              <div key={`audio_${i}`}>
                <audio controls style={{width: 200}} src={audioURL}/>
                <div>
                  <button onClick={() => this.deleteAudio(audioURL)}>Delete</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      );
    }
  }
  export default RecordingAPI
  