import React, { Component, useState } from 'react';
import { Actions } from 'react-native-router-flux';
import { SafeAreaView, AsyncStorage, StyleSheet, Image, Text, View, TouchableOpacity, Modal, FlatList } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons } from '@expo/vector-icons';

function Item({ marca, targa, index, allData, jwt }) {

  const [modalVisible, setModalVisible] = useState(false);
  const [encData, setEncData] = useState('');

  console.log(jwt);
  console.log(allData);

  const content = {
    data: allData
  }

  fetch('https://example.com/api/encrypt', {
    method: 'POST',
    body: JSON.stringify(content),
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'authorization': jwt
    }
  })
  .then(response => response.json())
  .then(res => setEncData(res.message))
  .catch(err => console.log(err));

  return (
    <React.Fragment>
      <Modal
        animationType='fade'
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}
      >
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center' }}>
          <View style={styles.modalInsideView}>
            <View style={{bottom: 50}}>
              <Text style={[styles.buttonText, styles.medium]}>{marca}   <Text style={styles.buttonText}>-   {targa}</Text></Text>
            </View>

            <Text>{JSON.stringify(encData)}</Text>

            <View style={{alignItems: 'center', justifyContent: 'center'}}>
              <TouchableOpacity style={[styles.button, {backgroundColor: '#00b0ff'}]} onPress={ () => setModalVisible(!modalVisible) }>
                <Ionicons
                  name={'ios-close'}
                  size={40}
                  style={{ color: 'white' }}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
      <TouchableOpacity
        style={[styles.infoVehicle, {marginTop: index === 1 ? 10 : 18}]}
        onPress={ () => setModalVisible(true) }>
        <View style={{flexDirection:'row', alignItems: 'stretch', alignItems: 'center', justifyContent: 'space-between'}}>
          <View style={{}}>
            <Text style={[styles.buttonText, styles.medium]}>{marca}   <Text style={styles.buttonText}>-   {targa}</Text></Text>
          </View>
          <View style={{}}>
            <Image
              style={{width: 40, height: 40, opacity: 0.5}}
              source={require('../../images/example.png')}
            />
          </View>
        </View>
      </TouchableOpacity>
    </React.Fragment>
  );
}

export default class Pages extends Component {

  constructor(props) {
    super(props);
    this.state = {
      jwt: null,
      username: null,
      myList: [],
      showModal: false,
    }
  }

  async componentDidMount() {
    try {
      this.setState({ jwt: await AsyncStorage.getItem('jwt') });
      this.setState({ username: await AsyncStorage.getItem('username') });
      this.setState({ myList: JSON.parse(await AsyncStorage.getItem('myList')) });
    }
    catch(err) {
      console.log(err);
    }
  }

  componentWillUpdate() {

    try {
      this.setState({ myList: JSON.parse(await AsyncStorage.getItem('myList')) });
    }
    catch(err) {
      console.log(err);
    }
  }

  toggleModal = (value) => {
    this.setState({ showModal: value });
  }

  render() {

    const { myList } = this.state;

    return (
      <SafeAreaView style={{flex: 1, backgroundColor: 'white', padding: 20}}>

        {
          myList.length >= 1 ?
            <FlatList
              data={myList}
              renderItem={
                ({ item, index }) =>
                  <Item
                    index={index}
                    marca={item.vehicle.marca}
                    targa={item.vehicle.targa}
                    allData={item}
                    jwt={this.state.jwt}
                  />
              }
              keyExtractor={item => item.vehicle.targa}
              extraData={this.props.dataUpdate}
            />
          :
          <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={styles.noVehicle}>Non hai veicoli salvati</Text>
          </View>

        }

        <View style={{paddingBottom: 40, alignItems: 'center', justifyContent: 'center'}}>
          <TouchableOpacity style={styles.button} onPress={ () => Actions.qrScanner() }>
            <Ionicons
              name={'ios-add'}
              size={40}
              style={{ color: 'white' }}
            />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    backgroundColor: 'white',
  },
  scroll: {
    height: '75%',
    flexGrow: 1,
    paddingVertical: 30
  },
  infoVehicle: {
    marginBottom: 10,
    height: 70,
    width: '100%',
    backgroundColor: 'white',
    justifyContent: 'center',
    borderRadius: 5,
    borderWidth: 0.6,
    borderColor: '#b3b3b5',
    padding: 10
  },
  button: {
    height: 60,
    width: 60,
    alignItems: 'center',
    alignContent: 'center',
    backgroundColor: '#7fc297',
    justifyContent: 'center',
    borderRadius: 60,
    borderWidth: 0.6,
    borderColor: '#7fc297'
  },
  buttonText: {
    color: 'white',
    fontSize: 40,
    fontFamily: 'RobotoRegular',
    alignItems: 'center',
    textAlign: 'center',
    justifyContent: 'center',
  },
  noVehicle: {
    fontSize: 20,
    fontFamily: 'RobotoRegular',
    textAlign: 'center',
    textAlignVertical: 'center',
    justifyContent: 'center',
    alignContent: 'center',
  },
  buttonText: {
    color: 'black',
    fontSize: 20,
    fontFamily: 'RobotoThin',
  },
  medium: {
    fontFamily: 'RobotoMedium',
  },
  modalInsideView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerButtonClose: {
    top: 50,
    textAlign: 'center',
    backgroundColor: '#00b0ff',
    borderRadius: 70,
    height: 70,
    width: 70,
    justifyContent: 'center',
  },
});