/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
  ImageBackground,
  Text,
  View,
  StatusBar,
 // TouchableHighlight,
//  Button,
  Image,
 // Alert,
  Modal,
  TouchableOpacity,
  BackHandler,
  //Pressable,
  TextInput,
  SafeAreaView,
  Dimensions,
  ScrollView,
   Animated,
   Easing,
} from 'react-native';
import Orientation from 'react-native-orientation';
import styles from '../style/styleMetronome';
import Sound from 'react-native-sound';
//import RNMetronome from   'react-native-metronome';
const playIcon = require('../media/img/play.png');
const stopIcon = require('../media/img/stop.png');
const leftIcon = require('../media/img/left.png');
const rightIcon = require('../media/img/right.png');
const settingsIcon = require('../media/img/settings.png');
const listIcon = require('../media/img/list.png');

const note1 = require('../media/img/notea.png');
const note2 = require('../media/img/noteb.png');
const note3 = require('../media/img/notec.png');
const note4 = require('../media/img/noted.png');
const note5 = require('../media/img/notee.png');
const note6 = require('../media/img/notef.png');


const sound1 = require('../media/sound/sound1.wav');
const sound2 = require('../media/sound/sound2.wav');
const sound3 = require('../media/sound/sound3.wav');
const sound4 = require('../media/sound/sound4.wav');
const sound5 = require('../media/sound/sound5.wav');

const color = ['darkgray','darkmagenta','cyan'];
var vv = 0;
const barTempo = [
{name :1,note:[{id:1, cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :2,note:[{id:1,cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :3,note:[{id:1,cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :4,note:[{id:1, cc:0}, {id:2,cc:0},{id:3,cc:1}]},
];

var miniBar = [{image:note3},{image:note3},{image:note3},{image:note3}];

const config = {
  deviceWidth: Dimensions.get('window').width,
  deviceHeight: Dimensions.get('window').height,
};

 var randomTempo = 0;

class MetronomeSkill extends React.Component {
  constructor(props) {
    super(props);
this.animatedValue = new Animated.Value(0);
    Sound.setCategory('Playback'); // true = mixWithOthers
    this.state = {
      playing: false,
      count: 0,
      bpm: 100,
      beatsPerMeasure: 3,
    soundNumber: 0,
    showImg: true,
      showSet : false,
      showList: false,
      showNotes: false,
      tempo: 100,
      beat: 4,
      note:4,
      moveShape: false,
      speed: 2000,
      image: note3,
      tempoName: 'Allegretto',
      toneSound: '4',
      soundName: sound1,
      rotation: 0,
        };

  }

  toggleKeyword = async (keyword, id) => {
     console.log('keyword',keyword);
     console.log('id', id);
             if (keyword === 0)  {
               //console.log(1);
               barTempo[id].note[keyword].cc = 1;
              console.log( barTempo[id].note[keyword].cc);
              }
      else if (keyword === 1)  {
        //console.log(2);
        barTempo[id].note[keyword].cc = 0;
        console.log( barTempo[id].note[keyword].cc);}
      else {
        //console.log(3);
        barTempo[id].note[keyword].cc = 0;
       console.log( barTempo[id].note[keyword].cc);
      }
    };

  onSubmit = () => {
  console.log('Submit');
  };

  homeExit = async () => {
     this.props.navigation.navigate('1');
  };

   backAction = () => {
   //this.setState({showDone: false, showQuit: false});
   this.props.navigation.navigate('1');
   Orientation.lockToPortrait();
  };

  componentDidMount() {
  //this.animate();
  //this.removeArray();
  BackHandler.addEventListener('hardwareBackPress', this.homeExit);
    Orientation.lockToPortrait();
   // this.displayData();
  }

    componentWillUnmount() {
     //  this.removeArray();
     BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
    //clearInterval(this.interval);
   // Orientation.lockToLandscape();
  }
  ';';

   //reset
   removeArray = () => {
    console.log('Remove');
  };

  //beat
  beatDown = async () => {
  //  console.log(this.state.beat);
   // var find =  {name: this.state.beat};
    let index = -1;
    if (this.state.beat ===  1) {
      this.setState({beat: 1});
       if ((index = barTempo.map(item => item.name).indexOf(this.state.beat - 1) !== -1)) {
      barTempo.splice(-index, 1);
      miniBar.splice(-index, 1);
   }
   // find = {name: 1};
    }
    else {
      this.setState({beat: this.state.beat - 1});
      // find = {name: this.state.beat - 1};
    if ((index = barTempo.map(item => item.name).indexOf(this.state.beat) !== -1)) {
     barTempo.splice(-index, 1);
      miniBar.splice(-index, 1);
   }
    }
    console.log(this.state.beat);
   console.log(barTempo);
  };

  beatUp = async () => {
    if (this.state.beat >= 16) {
      this.setState({beat: 16});
    }
    else {
      this.setState({beat: this.state.beat + 1});
      barTempo.push({name :this.state.beat + 1,note:[{id:1,cc:vv}, {id:2,cc:vv},{id:3,cc:1}]});
      miniBar.push({image:this.state.image});
       console.log(barTempo);
    }
  };


  //note
  noteDown = () => {
    if (this.state.note ===  1) {
      this.setState({note: 1});
      this.setState({image: note1});
      miniBar.map((item, id) => (item.image = note1 ));
    }
    else {
      this.setState({note: (this.state.note / 2 )});
      if ( this.state.note / 2 ===  16) {
      this.setState({image: note5});
       miniBar.map((item, id) => (item.image = note5 ));
    }
      if ( this.state.note / 2 ===  8) {
      this.setState({image: note4});
       miniBar.map((item, id) => (item.image = note4 ));
    }
     if ( this.state.note / 2 ===  4) {
      this.setState({image: note3});
       miniBar.map((item, id) => (item.image = note3));
    }
     if ( this.state.note / 2 ===  2) {
      this.setState({image: note2});
       miniBar.map((item, id) => (item.image = note2 ));
    }
    }
  };

  noteUp = () => {
    if (this.state.note >= 32) {
      this.setState({note: 32 });
      this.setState({image: note6});
       miniBar.map((item, id) => (item.image = note6 ));
    }
    else if (this.state.note ===  1) {
      this.setState({note: 1 + 1 });
       if ( this.state.note + 1 === 2) {
      this.setState({image: note2});
       miniBar.map((item, id) => (item.image = note2 ));
       }
    }
    else {
      this.setState({note: this.state.note * 2});
      if ( this.state.note * 2 === 32) {
      this.setState({image: note6});
       miniBar.map((item, id) => (item.image = note6 ));
    }
      if ( this.state.note * 2 ===  16) {
      this.setState({image: note5});
       miniBar.map((item, id) => (item.image = note5));
    }
      if ( this.state.note * 2 ===  8) {
      this.setState({image: note4});
       miniBar.map((item, id) => (item.image = note4 ));
    }
     if ( this.state.note * 2 ===  4) {
      this.setState({image: note3});
       miniBar.map((item, id) => (item.image = note3 ));
    }
    }
  };

    //left right
  leftDown = () => {
    if (this.state.tempo ===  10) {
      this.setState({tempo: 10, tempoName:'Larghissimo'});
    }
    else {
      this.setState({tempo: (this.state.tempo - 1 )});
      if (this.state.tempo - 1 > 10 && this.state.tempo - 1 <= 19){
       this.setState({tempoName:'Larghissimo'});
      }
       if (this.state.tempo - 1 > 19 && this.state.tempo - 1 <= 40){
       this.setState({tempoName:'Grave'});
      }
      if (this.state.tempo - 1 > 40 && this.state.tempo - 1 <= 45){
       this.setState({tempoName:'Lento'});
      }
       if (this.state.tempo - 1 > 45 && this.state.tempo - 1 <= 50){
       this.setState({tempoName:'Largo'});
      }
       if (this.state.tempo - 1 > 50 && this.state.tempo - 1 <= 55){
       this.setState({tempoName:'Larghetto'});
      }
       if (this.state.tempo - 1 > 55 && this.state.tempo - 1 <= 65){
       this.setState({tempoName:'Adagio'});
      }
       if (this.state.tempo - 1 > 65 && this.state.tempo - 1 <= 69){
       this.setState({tempoName:'Adagietto'});
      }
       if (this.state.tempo - 1 > 69 && this.state.tempo - 1 <= 72){
       this.setState({tempoName:'Andante moderato'});
      }
      if (this.state.tempo - 1 > 72 && this.state.tempo - 1 <= 77){
       this.setState({tempoName:'Andante'});
      }
      if (this.state.tempo - 1 > 77 && this.state.tempo - 1 <= 83){
       this.setState({tempoName:'Andantino'});
      }
      if (this.state.tempo - 1 > 83 && this.state.tempo - 1 <= 85){
       this.setState({tempoName:'Marcia moderato'});
      }
      if (this.state.tempo - 1 > 85 && this.state.tempo - 1 <= 97){
       this.setState({tempoName:'Moderato'});
      }
      if (this.state.tempo - 1 > 97 && this.state.tempo - 1 <= 109){
       this.setState({tempoName:'Allegretto'});
      }
      if (this.state.tempo - 1 > 109 && this.state.tempo - 1 <= 132){
       this.setState({tempoName:'Allegro'});
      }
      if (this.state.tempo - 1 > 132 && this.state.tempo - 1 <= 140){
       this.setState({tempoName:'Vivace'});
      }
      if (this.state.tempo - 1 > 140 && this.state.tempo - 1 <= 150){
       this.setState({tempoName:'Vivacissmo'});
      }
      if (this.state.tempo - 1 > 150 && this.state.tempo - 1 <= 167){
       this.setState({tempoName:'Allegrissma'});
      }
      if (this.state.tempo - 1 > 167 && this.state.tempo - 1 <= 177){
       this.setState({tempoName:'Presto'});
      }
        if (this.state.tempo - 1 > 177 && this.state.tempo - 1 <= 500){
       this.setState({tempoName:'Prestissimo'});
      }
    }
  };

  rightUp = () => {
    if (this.state.tempo >= 500) {
      this.setState({tempo: 500, tempoName:'Prestissimo'});
    }
    else {
      this.setState({tempo: this.state.tempo + 1});
       if (this.state.tempo + 1 > 10 && this.state.tempo + 1 <= 19){
       this.setState({tempoName:'Larghissimo'});
      }
       if (this.state.tempo + 1 > 19 && this.state.tempo + 1 <= 40){
       this.setState({tempoName:'Grave'});
      }
      if (this.state.tempo + 1 > 40 && this.state.tempo + 1 <= 45){
       this.setState({tempoName:'Lento'});
      }
       if (this.state.tempo + 1 > 45 && this.state.tempo + 1 <= 50){
       this.setState({tempoName:'Largo'});
      }
       if (this.state.tempo + 1 > 50 && this.state.tempo + 1 <= 55){
       this.setState({tempoName:'Larghetto'});
      }
       if (this.state.tempo + 1 > 55 && this.state.tempo  + 1 <= 65){
       this.setState({tempoName:'Adagio'});
      }
       if (this.state.tempo + 1 > 65 && this.state.tempo  + 1 <= 69){
       this.setState({tempoName:'Adagietto'});
      }
       if (this.state.tempo + 1 > 69 && this.state.tempo  + 1 <= 72){
       this.setState({tempoName:'Andante moderato'});
      }
      if (this.state.tempo + 1 > 72 && this.state.tempo  + 1 <= 77){
       this.setState({tempoName:'Andante'});
      }
      if (this.state.tempo + 1 > 77 && this.state.tempo  + 1 <= 83){
       this.setState({tempoName:'Andantino'});
      }
      if (this.state.tempo + 1 > 83 && this.state.tempo  + 1 <= 85){
       this.setState({tempoName:'Marcia moderato'});
      }
      if (this.state.tempo + 1 > 85 && this.state.tempo + 1 <= 97){
       this.setState({tempoName:'Moderato'});
      }
      if (this.state.tempo + 1 > 97 && this.state.tempo + 1 <= 109){
       this.setState({tempoName:'Allegretto'});
      }
      if (this.state.tempo + 1 > 109 && this.state.tempo + 1 <= 132){
       this.setState({tempoName:'Allegro'});
      }
      if (this.state.tempo + 1 > 132 && this.state.tempo  + 1 <= 140){
       this.setState({tempoName:'Vivace'});
      }
      if (this.state.tempo + 1 > 140 && this.state.tempo  + 1 <= 150){
       this.setState({tempoName:'Vivacissmo'});
      }
      if (this.state.tempo + 1 > 150 && this.state.tempo  + 1 <= 167){
       this.setState({tempoName:'Allegrissma'});
      }
      if (this.state.tempo + 1 > 167 && this.state.tempo  + 1 <= 177){
       this.setState({tempoName:'Presto'});
      }
        if (this.state.tempo + 1 > 177 && this.state.tempo + 1 <= 500){
       this.setState({tempoName:'Prestissimo'});
      }
    }
  };


  stopPlay(){
     this.setState({ showImg: !this.state.showImg });
     if (this.state.playing) {
            clearInterval(this.timer);
            this.setState({
                playing: false,
            });
        } else {
          this.animate();
            this.timer = setInterval(
                this.playClick,
                (60 / this.state.tempo) * 1000
            );
            this.setState(
                {
                    count: 0,
                    playing: true,
                   // value: 1,
                },
                this.playClick
            );
        }
  }

   playClick = async () => {
        const { count} = this.state;
          var play1 = new Sound(this.state.soundName, (error) => {
      if (error) {
        console.log('failed to load the sound', error);
        return;
      }
      // loaded successfully
      play1.play((success) => {
        if (success) {
         // console.log('successfully finished playing');
        } else {
         // console.log('playback failed due to audio decoding errors');
          play1.release();
        }
      });
    });

        this.setState(state => ({
            count: (state.count + 1) % this.state.beat,
        }));
    }

    keepTap = async () => {
       randomTempo = Math.floor(Math.random() * 300);
       console.log(randomTempo);
           this.setState({tempo:randomTempo});
             if (this.state.tempo > 10 && this.state.tempo <= 19){
       this.setState({tempoName:'Larghissimo'});
      }
       if (this.state.tempo > 19 && this.state.tempo <= 40){
       this.setState({tempoName:'Grave'});
      }
      if (this.state.tempo > 40 && this.state.tempo <= 45){
       this.setState({tempoName:'Lento'});
      }
       if (this.state.tempo > 45 && this.state.tempo <= 50){
       this.setState({tempoName:'Largo'});
      }
       if (this.state.tempo > 50 && this.state.tempo <= 55){
       this.setState({tempoName:'Larghetto'});
      }
       if (this.state.tempo > 55 && this.state.tempo <= 65){
       this.setState({tempoName:'Adagio'});
      }
       if (this.state.tempo > 65 && this.state.tempo  <= 69){
       this.setState({tempoName:'Adagietto'});
      }
       if (this.state.tempo > 69 && this.state.tempo  <= 72){
       this.setState({tempoName:'Andante moderato'});
      }
      if (this.state.tempo  > 72 && this.state.tempo  <= 77){
       this.setState({tempoName:'Andante'});
      }
      if (this.state.tempo > 77 && this.state.tempo <= 83){
       this.setState({tempoName:'Andantino'});
      }
      if (this.state.tempo > 83 && this.state.tempo <= 85){
       this.setState({tempoName:'Marcia moderato'});
      }
      if (this.state.tempo > 85 && this.state.tempo + 1 <= 97){
       this.setState({tempoName:'Moderato'});
      }
      if (this.state.tempo > 97 && this.state.tempo <= 109){
       this.setState({tempoName:'Allegretto'});
      }
      if (this.state.tempo > 109 && this.state.tempo <= 132){
       this.setState({tempoName:'Allegro'});
      }
      if (this.state.tempo  > 132 && this.state.tempo  <= 140){
       this.setState({tempoName:'Vivace'});
      }
      if (this.state.tempo > 140 && this.state.tempo  <= 150){
       this.setState({tempoName:'Vivacissmo'});
      }
      if (this.state.tempo > 150 && this.state.tempo   <= 167){
       this.setState({tempoName:'Allegrissma'});
      }
      if (this.state.tempo > 167 && this.state.tempo   <= 177){
       this.setState({tempoName:'Presto'});
      }
        if (this.state.tempo > 177 && this.state.tempo <= 500){
       this.setState({tempoName:'Prestissimo'});
      }
    }

  //note
  toneDown = () => {
    console.log('Down');
    if (this.state.toneSound ===  1) {
      this.setState({toneSound: 1, soundName: sound1});
    }
    else {
      this.setState({toneSound:  parseInt(this.state.toneSound, 10) - 1});
      if ( parseInt(this.state.toneSound, 10) - 1 === 4) {
              this.setState({soundName: sound4});
      }
      if ( parseInt(this.state.toneSound, 10) - 1 === 3) {
              this.setState({soundName: sound3});
      }
      if ( parseInt(this.state.toneSound, 10) - 1 === 2) {
              this.setState({soundName: sound2});
      }
    }
  };

  toneUp = () => {
    if (this.state.toneSound >= 5) {
      this.setState({toneSound: 5, soundName: sound5});
    }
    else {
      this.setState({toneSound:  parseInt(this.state.toneSound, 10) + 1});
        if ( parseInt(this.state.toneSound, 10) + 1 === 4) {
              this.setState({soundName: sound4});
      }
      if ( parseInt(this.state.toneSound, 10) + 1 === 3) {
              this.setState({soundName: sound3});
      }
      if ( parseInt(this.state.toneSound, 10) + 1 === 2) {
              this.setState({soundName: sound2});
      }
    }
  };

animate () {
  this.animatedValue.setValue(0);
  Animated.timing(
    this.animatedValue,
    {
      toValue: 1,
      //duration: 2000,
      duration:   (60 / this.state.tempo) * this.state.speed,
      easing: Easing.linear,
      useNativeDriver: false,
    }
  ).start(() => this.animate());
}


  render() {
    var imgSource = this.state.showImg ? playIcon : stopIcon;
   const movingMargin = this.animatedValue.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0, 300, 1],
  });

    return (
     <View style={{flex: 1}}>
       <ImageBackground
          source={require('../media/img/background.jpg')}
          style={styles.imagebackground}>

{/* Modal 1*/}
        <Modal transparent={true} visible={this.state.showSet} animationType="none">
         <View style={styles.modal1}>
          <SafeAreaView>
           <View style={styles.modal}><Text style={styles.textsetting}>Settings</Text>
           </View>
           <ScrollView>
            <View style={styles.view1modal1}>
             <View style={styles.view2modal1}>
              <Text style={styles.texttitle}>Tone</Text>
              <TouchableOpacity style={styles.tone} onPress={this.toneDown}>
               <Text style={styles.textdown}>-</Text>
              </TouchableOpacity>
              <Text style={styles.textsound}>{this.state.toneSound}</Text>
              <TouchableOpacity style={styles.tone} onPress={this.toneUp}>
               <Text style={styles.textup}>+</Text>
              </TouchableOpacity>
             </View>
            <View style={styles.viewLine}/>
            <Text style={styles.texttitle}>Visual Block</Text>
            <View style={styles.view3modal1}/>
             <Text style={styles.texttitle}>Tempo Calculation</Text>
            </View>
          </ScrollView>
          <View style={styles.view4modal1}>
           <TouchableOpacity style={styles.buttonback}  onPress={() => this.setState({showSet: false})}>
            <Text style={styles.textback}>Back</Text>
           </TouchableOpacity>
          </View>
         </SafeAreaView>
         </View>
        </Modal>

    {/* Modal 2*/}
        <Modal transparent={true} visible={this.state.showList} animationType="none">
         <View style={styles.modal2}>
          <SafeAreaView>
           <View style={styles.modal}><Text style={styles.textsetting}>List</Text>
           </View>
           <View style={styles.view1modal2}>
            <TouchableOpacity style={styles.buttonback}  onPress={() => this.setState({showList: false})}>
             <Text style={styles.textback}>Back</Text>
            </TouchableOpacity>
           </View>
          </SafeAreaView>
         </View>
        </Modal>

  {/* Modal 3*/}
        <Modal transparent={true} visible={this.state.showNotes} animationType="none">
         <View style={styles.modal3}>
          <SafeAreaView>
           <View style={styles.view1modal3}>
            <View style={styles.viewbeat}>
             <Text style={styles.textmodal3}>Beat</Text>
             <View style={styles.viewbuttonbeat}>
              <TouchableOpacity style={styles.beat} onPress={this.beatDown}>
               <Text style={styles.textdown1}>-</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.beat} onPress={this.beatUp}>
               <Text style={styles.textup1}>+</Text>
              </TouchableOpacity>
             </View>
            </View>
            <View style={styles.viewts}>
             <Text style={styles.textmodal3}>T.S.</Text>
              <TouchableOpacity style={styles.ts}>
               <Text style={styles.textts}>{this.state.beat}/{this.state.note}</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.viewnote}>
             <Text style={styles.textmodal3}>Note</Text>
             <View style={styles.viewnotes}>
              <TouchableOpacity style={styles.beat} onPress={this.noteDown}>
               <Text style={styles.textdown1}>-</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.beat} onPress={this.noteUp}>
               <Text style={styles.textup1}>+</Text>
              </TouchableOpacity>
             </View>
            </View>
            <View style={styles.viewaccent}>
             <Text style={styles.textaccent}>ACCENT</Text>
             <View style={styles.viewaccent1}>
              <TouchableOpacity style={styles.viewimagenote}>
              <View style={styles.viewminibar}>
               {miniBar.map((item, id) => (
               <Image key={id} style={styles.imagenote} source={item.image}/>
               ))}
              </View>
              </TouchableOpacity>
            </View>
            </View>
            </View>
            <View style={styles.viewbuttonback}>
            <TouchableOpacity style={styles.buttonback}  onPress={() => this.setState({showNotes: false})}>
             <Text style={styles.textback}>Back</Text>
            </TouchableOpacity>
           </View>
          </SafeAreaView>
         </View>
        </Modal>

      <StatusBar hidden />
       <SafeAreaView>
        <View style={styles.view1}>
         <View style={styles.view2}>
          <View style={styles.view3}>
           <View style={styles.view4}>
            <View style={styles.view5}>
             <Text>TEMPO</Text>
             <Text/>
             <Text style={styles.textmargints}>T.S.</Text>
             <Text>SUB DIV.</Text>
            </View>
            <View style={styles.view6}>
             <Image style={styles.image1} source={this.state.image}/>
              <Text style={{fontSize:35}}>{this.state.tempo}</Text>
              <Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
              <Text style={{fontSize:35, marginRight:25}}>{this.state.beat}/{this.state.note}</Text>
              <Image style={styles.image2} source={this.state.image}/>
            </View>
            <View style={styles.view7}>
             {barTempo.map((item, id) => (
               <View key={id} style={{ flexDirection: 'column'}}>
                 {item.note.map((c,i) => (
                  <TouchableOpacity key={i}  onPress={() => this.toggleKeyword(i,id)} style={{backgroundColor:color[c.cc],borderColor:'darkorchid', borderWidth:2,width: config.deviceWidth * 0.5 / barTempo.length, height:'25%', marginLeft:3, marginRight:5}}>
                  <Text/>
                  </TouchableOpacity>
                 ))}
               </View>
              ))}
            </View>
            <View style={styles.view8}>
             <TouchableOpacity style={styles.touchable1}><Text/></TouchableOpacity>
             <TouchableOpacity style={styles.touchable2}>
             <Animated.View
              style={{marginLeft: this.state.showImg ? 0 : movingMargin,height: '100%',width: '250%',backgroundColor: 'black'}} />
             </TouchableOpacity>
            </View>
           </View>
          </View>
         </View>
          <View style={styles.view9}/>
           <View style={styles.view10}>
           <View style={styles.view11}>
            <TouchableOpacity style={styles.touchable3} onPress={() => this.setState({showSet: true})}>
            <Image style={styles.image3} source={settingsIcon}/></TouchableOpacity>
            <TouchableOpacity style={styles.touchable4}  onPress={() => this.setState({showList: true})}>
             <Image style={styles.image4} source={listIcon}/>
            </TouchableOpacity>
           </View>
           <View style={styles.view12}>
            <TouchableOpacity style={styles.touchable5}><Text>1</Text></TouchableOpacity>
            <TouchableOpacity style={styles.touchable6} onPress={this.leftDown}><Image style={styles.image6} source={leftIcon}/></TouchableOpacity>
            <TouchableOpacity style={styles.touchable7} onPress={this.rightUp}><Image style={styles.image7} source={rightIcon}/></TouchableOpacity>
            <TouchableOpacity style={styles.touchable8}   onPress={() => this.stopPlay()} >
             <Image style={styles.image5} source={imgSource}/>
            </TouchableOpacity>
           </View>
           <View style={styles.view13}>
            <TouchableOpacity style={styles.touchable9}    onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
            <TouchableOpacity style={styles.touchable10} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
           </View>
          </View>
         </View>
        </SafeAreaView>
       </ImageBackground>
      </View>
    );
  }
}

export default MetronomeSkill;

