import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableHighlight,
  Alert,
  Button,
  Image
} from "react-native";
import DatePicker from "react-native-datepicker";
import ImagePicker from "react-native-image-picker";
import firebase from "react-native-firebase";
import uuid from "uuid/v4";

import { withNavigation } from "react-navigation";
import Colors from "../constants/colors";
import Dimensions from "../constants/dimensions";
import withFireBase from "./withFirebase";

const EditItem = props => {
  const { updateItem } = props;

  const state = {
    name: props.navigation.getParam("name"),
    date: props.navigation.getParam("expire"),
    type: props.navigation.getParam("type"),
    imageURI: props.navigation.getParam("imageURI"),
    ID: props.navigation.getParam("ID"),
    filename: ""
  };

  const [autoData, setValues] = useState(state);
  const handleNameChange = name => {
    setValues(prevState => ({ ...prevState, name: name }));
  };

  const handleSubmit = () => {
    updateItem({
      name: autoData.name,
      imageURI: autoData.imageURI,
      expire: autoData.date,
      type: autoData.type,
      date: autoData.date,
      ID: autoData.ID,
      filename: autoData.filename
    });
    console.log("TEST =>", autoData);

    Alert.alert("Eveniment actualizat cu succes");
  };

  const handleDateChange = date => {
    setValues(prevState => ({ ...prevState, date }));
  };

  const uploadImage = async () => {
    const ext = autoData.imageUri && autoData.imageUri.split(".").pop(); // Extract image extension
    const filename = `${uuid()}.${ext}`; // Generate unique name

    return firebase
      .storage()
      .ref(`Asigurari/images/${filename}`)
      .putFile(autoData.imageUri)
      .on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        snapshot => {
          let localState = { filename };
          if (snapshot.state === firebase.storage.TaskState.SUCCESS) {
            setValues(prevState => ({ ...prevState, ...localState }));
          }
        },
        error => {
          unsubscribe();
          alert("Sorry, Try again.");
        }
      );
  };

  const chooseFile = () => {
    var options = {
      title: "Select Image",
      customButtons: [
        { name: "customOptionKey", title: "Choose Photo from Custom Option" }
      ],
      storageOptions: {
        skipBackup: true,
        path: "images"
      }
    };
    ImagePicker.showImagePicker(options, response => {
      if (response.didCancel) {
        console.log("User cancelled image picker");
      } else if (response.error) {
        console.log("ImagePicker Error: ", response.error);
      } else if (response.customButton) {
        console.log("User tapped custom button: ", response.customButton);
        alert(response.customButton);
      } else {
        const source = { uri: response.uri };
        const newData = {
          imgSource: source,
          imageUri: response.uri
        };
        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };
        setValues(prevState => ({ ...prevState, ...newData }));
        //console.log("AutoData=>", {vfc:true}, autoData);
      }
    });
  };

  return (
    <View style={styles.main}>
      <Text style={styles.title}>{autoData.type}</Text>
      <DatePicker
        style={styles.datePicker}
        date={autoData.date} //initial date from autoData
        mode="date" //The enum of date, datetime and time
        placeholder="select expire date"
        format="DD-MM-YYYY"
        minDate=""
        maxDate=""
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        onDateChange={date => handleDateChange(date)}
      />
      <TextInput
        style={styles.itemInput}
        value={autoData.name}
        onChangeText={name => handleNameChange(name)}
      />
      <TouchableHighlight
        style={styles.button}
        onPress={() => {
          handleSubmit();
          uploadImage();
        }}
      >
        <Text style={styles.buttonText}>Update</Text>
      </TouchableHighlight>
      <Button title="Select Image" onPress={chooseFile} />
      <Image source={autoData.imgSource} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: Dimensions.primarySpacing,
    flexDirection: "column",
    justifyContent: "center"
  },
  datePicker: {
    width: Dimensions.datePickerWidth,
    marginBottom: 20,
    marginLeft: 20
  },
  title: {
    marginBottom: Dimensions.primarySpacing,
    fontSize: Dimensions.titleFontSize,
    textAlign: "center"
  },
  itemInput: {
    height: Dimensions.primaryHeight,
    padding: 4,
    marginRight: 5,
    fontSize: Dimensions.titleFontSize,
    borderWidth: 1,
    borderColor: Colors.addItemInputBackgroundColor,
    borderRadius: 8,
    color: Colors.addItemInputBackgroundColor
  },
  buttonText: {
    fontSize: 18,
    color: Colors.loginButtonColor,
    alignSelf: "center"
  },
  button: {
    height: Dimensions.primaryHeight,
    flexDirection: "row",
    backgroundColor: Colors.white,
    borderColor: Colors.white,
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: Dimensions.padding,
    marginTop: Dimensions.padding,
    alignSelf: "stretch",
    justifyContent: "center"
  },
  image: {
    marginTop: 20,
    minWidth: 200,
    height: 200
  }
});

export default withFireBase(withNavigation(EditItem));