/* 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/sound3.wav');
const sound2 = require('../media/sound/sound5.wav');

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


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',
    };

  }

  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 = () => {
    if (this.state.beat ===  1) {
      this.setState({beat: 1});
    }
    else {
      this.setState({beat: this.state.beat - 1});
    }
  };

  beatUp = () => {
    if (this.state.beat >= 16) {
      this.setState({beat: 16});
    }
    else {
      this.setState({beat: this.state.beat + 1});
    }
  };


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

  noteUp = () => {
    if (this.state.note >= 32) {
      this.setState({note: 32 });
       this.noteChange();
    }
    else if (this.state.note ===  1) {
      this.setState({note: 1 + 1 });
       if ( this.state.note + 1 === 2) {
      this.setState({image: note2});
       }
    }
    else {
      this.setState({note: this.state.note * 2});
      if ( this.state.note * 2 === 32) {
      this.setState({image: note6});
    }
      if ( this.state.note * 2 ===  16) {
      this.setState({image: note5});
    }
      if ( this.state.note * 2 ===  8) {
      this.setState({image: note4});
    }
     if ( this.state.note * 2 ===  4) {
      this.setState({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,
                },
                this.playClick
            );
        }
  }

   playClick = async () => {
        const { count} = this.state;
          var play1 = new Sound(sound2, (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,
        }));
    }


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={{  backgroundColor: '#545252',marginTop:275,height:'65%', width:'93%', marginRight:30}}>
          <SafeAreaView>
          <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text>
         </View>
            <ScrollView>
              <View
                style={{  flexDirection: 'column',
    flexWrap: 'wrap',
    width: config.deviceWidth,
    marginLeft: config.deviceWidth * 0.04,
    marginRight: config.deviceWidth * 0.1,
    marginBottom: config.deviceHeight * 0.12}}>

                <Text style={{fontSize:20, margin:10}}>Tone</Text>

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

                <Text style={{fontSize:20, margin:10}}>Visual Block</Text>

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

                <Text style={{fontSize:20, margin:10}}>Tempo Calculation</Text>

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

                <Text style={{fontSize:20, margin:10}}>UI Sound Effect</Text>

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

                <Text style={{fontSize:20, margin:10}}>Mute Reminder</Text>

              </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:275,height:'65%', width:'93%', marginLeft:30}}>
          <SafeAreaView>
          <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text>
         </View>

            <View style={{alignItems: 'center', marginTop:250, height:'30%'}}>
            <TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',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:'100%', 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:130, 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:'120%',borderRadius:10}}>
               <Image style={{height:35, width:35, marginTop:5,marginRight:25}} source={this.state.image}/>
            </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:35, alignItems: 'center', marginTop:10, marginLeft:8}} source={this.state.image}/>
               <Text style={{fontSize:40}}>{this.state.tempo}</Text>
               <Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
               <Text style={{fontSize:40, marginRight:25}}>{this.state.beat}/{this.state.note}</Text>
               <Image style={{height:35, width:35, alignItems: 'center', marginTop:10, marginRight:25}} source={this.state.image}/>
               </View>
                <View style={{flexDirection: 'row', marginLeft:10, marginRight:10, justifyContent: 'space-between'}}>
               <TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity>
                <TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity>
                <TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity>
               <TouchableOpacity style={{backgroundColor:'darkmagenta',borderColor:'darkorchid', borderWidth:3,width:'20%', height:'200%'}}><Text/></TouchableOpacity>
               </View>
                 <View style={{flexDirection: 'row', marginTop:25, marginLeft:10, marginRight:10, justifyContent: 'space-between'}}>
               <TouchableOpacity style={{backgroundColor:'grey',width:'100%', height:'180%'}}><Text/></TouchableOpacity>
               <TouchableOpacity style={{height:'180%', width:10, position: 'absolute'}}>
              <Animated.View
        style={{
          marginLeft: this.state.showImg ? 0 : movingMargin,
          height: '100%',
          width: '250%',
          backgroundColor: 'black'}} />
               </TouchableOpacity>

               </View>
             </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:'#7097A6', 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:'#7097A6', 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={{marginTop: config.deviceHeight * 0.01, alignItems:'center'}}>
              <TouchableOpacity style={{backgroundColor:'#AAACAD',borderColor:'white',borderWidth:3, padding:130, borderRadius:200, position: 'absolute'}}><Text>1</Text></TouchableOpacity>
              <TouchableOpacity style={{position: 'absolute',top:18, right: config.deviceWidth * 0.5}} onPress={this.leftDown}><Image style={{height:252, width:115}} source={leftIcon}/></TouchableOpacity>
              <TouchableOpacity style={{position: 'absolute',top:18, left:config.deviceWidth * 0.5}} onPress={this.rightUp}><Image style={{height:250, width:115}} source={rightIcon}/></TouchableOpacity>
              <TouchableOpacity style={{position: 'absolute',top:67}}   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:'#7097A6', 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:'#7097A6', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
            </View>
            </View>
         </View>
      </SafeAreaView>
      </ImageBackground>
      </View>
    );
  }
}

export default MetronomeSkill;

