/* 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,
   PanResponder,
   Switch,
} 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 tempoIcon = require('../media/img/tempo_control.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 barTempo = [
{name :1,note:[{id:1}, {id:2},{id:3}],active:true},
{name :2,note:[{id:1}, {id:2},{id:3}],active:true},
{name :3,note:[{id:1}, {id:2},{id:3}],active:true},
{name :4,note:[{id:1}, {id:2},{id:3}],active:true},
];

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._rotationAnimation = new Animated.Value(0);
    this._rotationOffset = 0;
    this._gestureOffset = { x: 0, y: 0 };
    this._gestureValue = new Animated.ValueXY();
    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
         this.setState({dragging: true});
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}
        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      /*  this._gestureValue.setValue({
          x: this._gestureOffset.x + gestureState.dx,
          y: this._gestureOffset.y + gestureState.dy,
        }); */

         let Moved = Math.sqrt(Math.pow(gestureState.dx,2) + Math.pow(gestureState.dy,2));
  if (Math.sign(gestureState.dx) === -1 &&  Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || Math.sign(gestureState.dy) === -1 &&  Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
    Moved = -1 * Moved;
  }
  if (Moved > 10 ){
     //if (Moved > 10 ) {
        var Tm = Moved / 360;
        this._rotationAnimation.setValue(Tm);
        console.log('move');
        //      this.setState({tempo: this.state.tempo + 1});
       // this.rightUp();
        this.leftDown();
     // }
  } else if (Moved < 0) {
      //  if (Moved > -80 &&  Moved < -10) {
            var Tm = Moved / 360;
            this._rotationAnimation.setValue(Tm);
             console.log('move anti');
            //this.setState({tempo: this.state.tempo - 1});
            // this.leftDown();
             this.rightUp();

          //}
        }
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
        this._gestureOffset.x += gestureState.dx;
        this._gestureOffset.y += gestureState.dy;
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    });

    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: '1',
      soundName: sound1,
      color: true,
      isEnabled: true,
      showPendulum:true,
      barTempoH : config.deviceHeight * 0.09,
     // num : 0,
        };

  }

  toggleKeyword = (keyword) => {
      console.log(keyword);
    };

  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}, {id:2},{id:3}],active:true});
      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,
               // num:0,
            });
             barTempo.map((item,id) => {
               item.active = true;
          });
        } else {
          this.animate();
          // console.log('count stop:', this.state.count);
            this.timer = setInterval(
                this.playClick,
                (60 / this.state.tempo) * 1000
            );
            this.setState(
                {
                    count: 0,
                    playing: true,
                  //  num:0,
                },
                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({
            count: (this.state.count) % this.state.beat,
        });
        // console.log('count before:', this.state.count);

            barTempo.map((item,id) => {
          if (id === this.state.count) {
            item.active = false;
           // console.log('count:', this.state.count);
           // console.log(id);
          }
          else {item.active = true;}
          });
         // this.setState({num : this.state.num + 1});
          //console.log('count after:', this.state.count);
            this.setState({
            count: this.state.count + 1,
        });
    }

    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());
}

getRotationAnimation = () => {
    const rotate = this._rotationAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });
    return { rotate };
  };

  money = async() =>{
    let index = -1;
    console.log('money');
     this.setState({tempo:126});
      this.setState({tempoName:'Allegro'});
      if (barTempo.length < 7) {
      for (var j = barTempo.length; j < 7; j++) {
         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true});
      }
       this.setState({beat: barTempo.length});
    }
    if (barTempo.length > 7){
      console.log(barTempo.length);
      for (var j = barTempo.length; j > 7; j--) {
     if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
      barTempo.splice(-index, 1);
   }
      }
      this.setState({beat: barTempo.length});
    }
  };

  jude = async () =>{
    console.log('hey jude');
     this.setState({tempo:74});
      this.setState({tempoName:'Andante'});
      let index = -1;
      if (barTempo.length < 4) {
      for (var j = barTempo.length; j < 4; j++) {
         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true});
      }
       this.setState({beat: barTempo.length});
    }
    if (barTempo.length > 4){
    //  console.log(barTempo.length);
      for (var j = barTempo.length; j > 4; j--) {
     if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
      barTempo.splice(-index, 1);
   }
      }
      this.setState({beat: barTempo.length});
      console.log(barTempo.length);
    }
  };

  cajon = async () =>{
    console.log('cajon rhythm');
     this.setState({tempo:300});
     this.setState({tempoName:'Prestissimo'});
      let index = -1;
      if (barTempo.length < 8) {
      for (var j = barTempo.length; j < 8; j++) {
         barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active :true});
      }
       this.setState({beat: barTempo.length});
    }
    if (barTempo.length > 8){
    //  console.log(barTempo.length);
      for (var j = barTempo.length; j > 8; j--) {
     if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
      barTempo.splice(-index, 1);
   }
      }
      this.setState({beat: barTempo.length});
      console.log(barTempo.length);
    }
  };


  toggleSwitch = () => {
    if (this.state.isEnabled === false)
      {this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09});}
    else
      {this.setState({isEnabled: false, showPendulum: false, barTempoH: config.deviceHeight * 0.13});}
  };

  pendulum (){
    const movingMargin = this.animatedValue.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0, 300, 1],
  });
      if (this.state.showPendulum){
       return (
       <View style={{flexDirection: 'row', marginTop:5, marginLeft:13, marginRight:15, justifyContent: 'space-between'}}>
               <TouchableOpacity style={{backgroundColor:'grey',width:'100%', height:'180%'}}><Text/></TouchableOpacity>
              <Animated.Image
        style={{
          marginLeft: this.state.showImg ? 0 : movingMargin,
          height: '180%',
          width: '8%',
          backgroundColor: 'black', position: 'absolute'}} />
               </View>
    );
    }
        else {
          return null;
        }
  }

  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={{  backgroundColor: '#545252',marginTop:296,height:'60%', width:'93%', marginRight:30}}>
          <SafeAreaView>
          <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text>
         </View>
            <ScrollView>
              <View
                style={{  flexDirection: 'row',
    flexWrap: 'wrap',
    width: config.deviceWidth,
    marginLeft: config.deviceWidth * 0.04,
    marginRight: config.deviceWidth * 0.1,
    marginBottom: config.deviceHeight * 0.12}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.05,marginTop: config.deviceHeight * 0.05, height:'20%', marginBottom: 20}}>
  <Text style={{fontSize:20, marginRight:10}}>Tone</Text>
  <TouchableOpacity style={{backgroundColor:'white', width:'10%', height:'100%',borderRadius:10}} onPress={this.toneDown}>
                  <Text style={{marginLeft:11, fontSize:25}}>-</Text>
            </TouchableOpacity>
            <Text style={{fontSize:20, marginLeft:20, marginRight:20, marginTop:5}}>{this.state.toneSound}</Text>
              <TouchableOpacity style={{backgroundColor:'white', width:'10%', height:'100%',borderRadius:10}} onPress={this.toneUp}>
                  <Text style={{marginLeft:11, fontSize:25}}>+</Text>
            </TouchableOpacity>

                </View>

                <View style={{borderWidth:2, borderColor:'black', width:'85%'}}/>

<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.06,marginTop: config.deviceHeight * 0.01, height:'20%', marginBottom: 20}}>
  <Text style={{fontSize:20, marginRight:10}}>Visual Block</Text>
     <Switch
        trackColor={{ false: '#767577', true: 'black' }}
        thumbColor={this.state.isEnabled ? '#7eb9db' : '#f4f3f4'}
        onValueChange={this.toggleSwitch}
        value={this.state.isEnabled}
      />
                </View>

              </View>
            </ScrollView>
            <View style={{alignItems: 'center', height:'30%'}}>
            <TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}}  onPress={() => this.setState({showSet: false})}>
            <Text style={{marginLeft:10}}>Back</Text>
            </TouchableOpacity>
            </View>
          </SafeAreaView>
          </View>
        </Modal>

    {/* Modal 2*/}
         <Modal transparent={true} visible={this.state.showList} animationType="none">
       <View style={{  backgroundColor: '#545252',marginTop:296,height:'80%',width:'93%', marginLeft:30}}>
          <SafeAreaView>
          <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text>
         </View>

<ScrollView>
<View style={{    marginLeft: config.deviceWidth * 0.03,
    marginRight: config.deviceWidth * 0.03,
    marginBottom: config.deviceHeight * 0.12,
    }}>
   <TouchableOpacity style={{backgroundColor:'white', marginBottom:5,height:'35%'}}  onPress={() => this.money()}>
    <View style={{flexDirection : 'row', marginTop:5}}>
  <View style={{flexDirection: 'row'}}>
  <Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
  <Text style={{fontSize:30}}>126</Text>
  </View>
  <View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18}}>7/4</Text>
  <Text style={{fontSize:18}}>Money  - Pink Floyd</Text></View>
  </View>
 </TouchableOpacity>
   <TouchableOpacity style={{backgroundColor:'white', marginBottom:5,height:'35%'}} onPress={() => this.jude()}>
  <View style={{flexDirection : 'row',marginTop:5}}>
  <View style={{flexDirection: 'row'}}>
  <Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
  <Text style={{fontSize:30}}>74</Text>
  </View>
  <View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18}}>4/4</Text>
  <Text style={{fontSize:18}}>Hey Jude - Beatles</Text></View>
  </View>
  </TouchableOpacity>

   <TouchableOpacity style={{backgroundColor:'white', marginBottom:5,height:'35%'}} onPress={() => this.cajon()}>
  <View style={{flexDirection : 'row', marginTop:5}}>
  <View style={{flexDirection: 'row'}}>
  <Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
  <Text style={{fontSize:30}}>300</Text>
  </View>
  <View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18}}>8/4</Text>
  <Text style={{fontSize:18}}>Cajon Rhythm</Text></View>
  </View>
  </TouchableOpacity>
  </View>
            </ScrollView>
            <View style={{alignItems: 'center', marginTop:2}}>
            <TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'25%',borderRadius:5}}  onPress={() => this.setState({showList: false})}>
            <Text style={{marginLeft:10}}>Back</Text>
            </TouchableOpacity>
            </View>
          </SafeAreaView>
          </View>
        </Modal>

  {/* Modal 3*/}
         <Modal transparent={true} visible={this.state.showNotes} animationType="none">
          <View style={{  backgroundColor: '#545252',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
          <SafeAreaView>
              <View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.1,marginRight: config.deviceWidth * 0.1,marginBottom: config.deviceHeight * 0.12,marginTop: config.deviceHeight * 0.05, height:'40%'}}>

                <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
                <Text style={{fontSize:20,  marginLeft:20, marginRight:20}}>Beat</Text>
              <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
                  <TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatDown}>
                  <Text style={{marginLeft:8, fontSize:25}}>-</Text>
            </TouchableOpacity>
              <TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatUp}>
                  <Text style={{marginLeft:7, fontSize:25}}>+</Text>
            </TouchableOpacity>
            </View>
                </View>

                <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
                <Text style={{fontSize:20, marginLeft:20, marginRight:20}}>T.S.</Text>
                <TouchableOpacity style={{backgroundColor:'white', width:'120%', height:'40%',borderRadius:8}}>
                  <Text style={{marginLeft:10, fontSize:25}}>{this.state.beat}/{this.state.note}</Text>
            </TouchableOpacity>
                </View>

                <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.01,marginBottom: config.deviceHeight * 0.02}}>
                <Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Note</Text>
              <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
                  <TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteDown}>
                  <Text style={{marginLeft:8, fontSize:25}}>-</Text>
            </TouchableOpacity>
              <TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteUp}>
                  <Text style={{marginLeft:7, fontSize:25}}>+</Text>
            </TouchableOpacity>
            </View>
                </View>


            <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.8,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.8,marginBottom: config.deviceHeight * 0.05}}>
                <Text style={{fontSize:20, marginLeft:100, marginRight:40,marginBottom:20}}>ACCENT</Text>
              <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center'}}>
                  <TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'130%',borderRadius:8}}>
                  <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center',marginTop:6}}>
                  {miniBar.map((item, id) => (
               <Image key={id} style={{height:35, width:15, marginTop:5}} source={item.image}/>
               ))}
                    </View>
            </TouchableOpacity>
            </View>
                </View>
              </View>
            <View style={{alignItems: 'center', height:'30%', marginTop:30}}>
            <TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}}  onPress={() => this.setState({showNotes: false})}>
            <Text style={{marginLeft:11}}>Back</Text>
            </TouchableOpacity>
            </View>
          </SafeAreaView>
          </View>
        </Modal>


        <StatusBar hidden />
        <SafeAreaView>
        <View style={{height: '70%',marginTop:50}}>
          <View style={{height:'60%', width:'100%'}}>
            <View style={{alignItems:'center'}}>
             <View style={{backgroundColor:'white', height:'85%', width:'95%', marginLeft:10, marginRight:10, marginTop:30, borderRadius:10}}>
               <View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}>
               <Text>TEMPO</Text>
               <Text/>
               <Text style={{marginLeft:110}}>T.S.</Text>
               <Text>SUB DIV.</Text>
               </View>
                <View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}>
              <Image style={{height:35, width:20, marginTop:10, marginLeft:8}} 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={{height:35, width:20, marginTop:10, marginRight:30}} source={this.state.image}/>
               </View>
                <View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
                  {barTempo.map((item, id) => (
                <TouchableOpacity   key={id} style={{backgroundColor:item.active ? '#7eb9db' : 'cyan',borderColor:'black', borderWidth:1,width: config.deviceWidth * 0.5 / barTempo.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}}>
                <Text/></TouchableOpacity>
               ))}
               </View>
               {this.pendulum()}
             </View>
            </View>
         </View>
          <View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/>
           <View style={{backgroundColor:'gray', height: '120%', width:'100%', marginTop:5}}>
           <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}>
              <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'15%', height:'135%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.6, borderRadius:8}} onPress={() => this.setState({showSet: true})}>
              <Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity>
              <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'15%', height:'135%',borderRadius:8}}  onPress={() => this.setState({showList: true})}>
                  <Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={listIcon}/>
              </TouchableOpacity>
            </View>
            <View style={{ alignItems:'center'}}>
            <Animated.Image
            source={tempoIcon}
          style={{
            height:320,
            width:320,
            position: 'absolute',
            transform: [
              this.getRotationAnimation(),
            ],
          }}
          {...this._panResponder.panHandlers}
        />
              <TouchableOpacity style={{position: 'absolute',top:40, right: config.deviceWidth * 0.5}} onPress={this.leftDown}><Image style={{height:242, width:110}} source={leftIcon}/></TouchableOpacity>
              <TouchableOpacity style={{position: 'absolute',top:40, left:config.deviceWidth * 0.5}} onPress={this.rightUp}><Image style={{height:240, width:110}} source={rightIcon}/></TouchableOpacity>
              <TouchableOpacity style={{position: 'absolute',top:85}}   onPress={() => this.stopPlay()} ><Image style={{height:150, width:150}} source={imgSource}/></TouchableOpacity>
            </View>

            <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}>
              <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}}    onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
              <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
            </View>
            </View>
         </View>
      </SafeAreaView>
      </ImageBackground>
      </View>
    );
  }
}

export default MetronomeSkill;

