/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
  SafeAreaView,
  ImageBackground,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Dimensions,
 // TextInput,
} from 'react-native';
import Orientation from 'react-native-orientation';
import Notes from './data';
import * as RNFS from 'react-native-fs';
import NumericInput from 'react-native-numeric-input';

var path = RNFS.DocumentDirectoryPath + '/settings.txt';
var path1 = RNFS.DocumentDirectoryPath + '/counter.txt';


const config = {
  deviceWidth: Dimensions.get('window').width,
  deviceHeight: Dimensions.get('window').height,
};
const note = [];
var counter = 0;

export default class Settings extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
  }
  toggleKeyword = (keyword) => {
    let list = note;
    let index = -1;
    if ((index = note.indexOf(keyword)) !== -1) {
      list.splice(index, 1);
    } else {
         list.push(keyword);
    }
    this.setState({note: list});
    this.saveData(note);
    this.displayData();
    console.log(counter);
  };

    saveData = async () => {
      RNFS.writeFile(path,JSON.stringify(note),'utf8',)
        .then((success) => {
        console.log(JSON.stringify(note));
        })
        .catch((err) => {
          console.log(err.message);
        });
  };

    displayData = async () => {
    RNFS.readFile(path, 'ascii')
      .then((res) => {
       // console.log(JSON.stringify(res));
      })
      .catch((err) => {
        console.log(err.message, err.code);
      });
  };

      saveData1 = async () => {
      RNFS.writeFile(path1,JSON.stringify(counter),'utf8',)
        .then((success) => {
        //console.log(JSON.stringify(note));
        })
        .catch((err) => {
          console.log(err.message);
        });
  };

    displayData1 = async () => {
    RNFS.readFile(path1, 'ascii')
      .then((res) => {
        console.log(JSON.stringify(res));
      })
      .catch((err) => {
        console.log(err.message, err.code);
      });
  };

  componentDidMount() {
    note.splice(0, note.length);
    console.log(note);
    Orientation.lockToPortrait();
    console.log(note.length);
    counter = 0;
    RNFS.unlink(path).then(res => {
    console.log('delete');
    RNFS.scanFile(path);
})
.catch(err => {
    console.log(err.message, err.code);
});
    RNFS.unlink(path1).then(res => {
    console.log('delete');
    RNFS.scanFile(path1);
})
.catch(err => {
    console.log(err.message, err.code);
});
  }

    onChange(number, type) {
    //console.log(number, type); // 1, + or -
    counter = number;
    if (counter > 0) {
    this.saveData1(counter);
    console.log(number);
    this.displayData1();
  }
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require('../img/background.jpg')}
          style={{width: config.deviceWidth, height: config.deviceHeight}}>
          <SafeAreaView>
          <View style={{alignItems:'center',marginTop: '15%',  marginLeft: config.deviceWidth * 0.08,
                  marginRight: config.deviceWidth * 0.1, flexDirection: 'row',
                  flexWrap: 'wrap'}}>
                  <Text style={{fontSize: 15,marginRight:5}}>No. of Questions : </Text>
          <NumericInput
            value={this.state.value}
            minValue={0}
            maxValue={100}
            onChange={this.onChange.bind(this)}
            onLimitReached={(isMax,msg) => console.log(isMax,msg)}
            totalWidth={150}
            totalHeight={40}
            iconSize={25}
            step={1}
            valueType="real"
            rounded
            textColor="black"
            iconStyle={{ color: 'white' }}
            rightButtonBackgroundColor="black"
            leftButtonBackgroundColor="black"/>
            </View>
            <ScrollView style={{marginTop: '5%', marginBottom : '20%'}}>
              <View
                style={{
                  flexDirection: 'row',
                  flexWrap: 'wrap',
                  width: config.deviceWidth,
                  marginLeft: config.deviceWidth * 0.08,
                  marginRight: config.deviceWidth * 0.1,
                }}>
                {Notes.map((item, id) => (
                  <View key={id}>
                    <TouchableOpacity
                      style={
                        note.find((element) => element === item.name)
                          ? styles.selectedKeywordStyle
                          : styles.buttonStyle
                      }
                      onPress={() => this.toggleKeyword(item.name)}
                      key={id} activeOpacity={1.0}>
                      <Image
                        source={item.image}
                        style={{
                          width: 100,
                          height: 100,
                        }}
                      />
                      <Text style={{textAlign: 'center', paddingBottom: 10}}>
                        {item.name}
                      </Text>
                    </TouchableOpacity>
                  </View>
                ))}
              </View>
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
  },
  buttonStyle: {
    flex: 1,
    width: config.deviceWidth * 0.4,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    backgroundColor: 'white',
    padding: 10,
    marginRight: config.deviceWidth * 0.03,
    marginBottom: config.deviceHeight * 0.03,
  },
  selectedKeywordStyle: {
    flex: 1,
    width: config.deviceWidth * 0.4,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'black',
     backgroundColor: 'lightpink',
    borderRadius: 10,
    marginRight: config.deviceWidth * 0.03,
    marginBottom: config.deviceHeight * 0.03,
    padding: 10,
  },
});