import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  CameraRoll,
  Alert,
  Platform,
} from 'react-native';
import ImageView from 'react-native-image-viewing';
import DocumentPicker from 'react-native-document-picker';
import ImageHeader from '../../components/imageHeader';
var RNFS = require('react-native-fs');
import RNFetchBlob from 'rn-fetch-blob';
import Realm from 'realm';
import ImageFooter from '../../components/imageFooter';
import FastImage from 'react-native-fast-image';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Modal, {ModalContent} from 'react-native-modals';
import {colors} from '../../assets/styles/colors-theme';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import {Fonts} from '../../assets/styles/fonts-theme';
import LoadingView from '../../common/loading';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import Migrations from '../../services/realm/Mirgrations';
import BackHeader from '../../components/backHeader';
import {inject, observer} from 'mobx-react';
import {observable} from 'mobx';
import AsyncStorageHelper from '../../common/asyncStorageHelper';
import ImagePicker from 'react-native-image-crop-picker';
import {width, height} from '../../common/screen';
const asyncStorageHelper = new AsyncStorageHelper();
import {
  UserSchemea,
  ApartmentSchemea,
  DocSchemea,
  NotificationSchemea,
} from '../../services/realm/schemeas';
const options = {
  title: 'Select Avatar',
  customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
  storageOptions: {
    cameraRoll: true,
    skipBackup: true,
    path: 'images',
  },
};

let realm = new Realm({
  schema: [UserSchemea, ApartmentSchemea, DocSchemea, NotificationSchemea],
});

const pdfFolder = [
  {name: 'philiptestPDFFile1.pdf', uri: ''},
  {name: 'philiptestPDFFile1.pdf', uri: ''},
  {name: 'philiptestPDFFile1.pdf', uri: ''},
];

const convertLocalIdentifierToAssetLibrary = (localIdentifier, ext) => {
  const hash = localIdentifier.split('/')[0];
  return `assets-library://asset/asset.${ext}?id=${hash}&ext=${ext}`;
};

@inject('appStore')
@observer
export default class UpLoadImage extends Component {
  @observable
  apartmentData = {
    id: null,
    createDate: null,
    modifyDate: null,
    avatar: null,
    name: null,
    address: null,
    signContractDate: null,
    endContractDate: null,
    rent: null,
    country: null,
    callingCode: null,
    rentNotification: 1,
    endContractNotification: 1,
    remark: [],
    doc: [],
  };

  @observable
  apartmentDataRemark = [];
  @observable
  loginAddDoc = [];
  @observable
  imageSize = {height: 100, width: 100};
  @observable
  dialogPhotoVisable = false;
  @observable
  testImage = null;
  @observable
  rectangleCoordinates = {
    topLeft: {x: 10, y: 10},
    topRight: {x: 10, y: 10},
    bottomRight: {x: 10, y: 10},
    bottomLeft: {x: 10, y: 10},
  };
  @observable
  type = 0;
  @observable
  visable = false;
  @observable
  imageIndex = 0;

  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.state = {
      avatarSource: null,
      image: [],
    };
  }

  async componentWillMount() {
    if (!this.props.navigation.state.params.create) {
      await this.store.cloneApartmentData(
        this.props.navigation.state.params.index,
      );
      await this.store.cloneApartmentDocData(
        this.props.navigation.state.params.index,
      );
    }
  }

  componentDidMount() {
    RNFS.readDir(RNFS.DocumentDirectoryPath) // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)
      .then(result => {
        console.log('GOT RESULT', result);

        // stat the first file
      });
    asyncStorageHelper.getData('image', image => {
      if (image != null) {
        console.log(image);
        const source = {uri: image};
        this.setState({avatarSource: source});
      }
    });
  }

  async clickAvatarAction(index) {
    this.visable = true;
    this.imageIndex = index;
    console.log(avatarIndex);
  }

  imageData(name, type, path) {}

  saveImage(index) {
    // var promise = CameraRoll.saveToCameraRoll(uri);
    // promise
    //   .then(function(result) {
    //     console.log(result);
    //     // const source = { uri:convertLocalIdentifierToAssetLibrary(result,'jpg') };
    //     // this.store.image = source
    //     this.removeIMageTag(uri);
    //   })
    //   .catch(function(error) {
    //     console.log(error);
    //   });
    console.log('click');
    console.log(index);
  }

  saveImageHandler(image, type) {
    var photoId = this.store.idGenerator();
    console.log(photoId);
    return {
      id: photoId,
      name: image.filename,
      type: this.type,
      createDate: new Date(),
      uri: image.path,
      mime: image.mime,
      height: image.height,
      width: image.width,
    };
  }

  savePdfHandler(data, path) {
    var pdfId = this.store.idGenerator();
    return {
      id: pdfId,
      name: data.name,
      type: 4,
      uri: path,
      createDate: new Date(),
      mime: '',
      height: 0,
      width: 0,
    };
  }

  async createApartmentAction() {
    await this.store.deleteDemo();
    var data = this.store.apartmentData;
    let user = realm.objects('User');
    await this.store.endContractlocalNotificationHandler();
    try {
      let newApartment = {
        id: this.store.idGenerator(),
        createDate: new Date(),
        modifyDate: new Date(),
        name: data.name,
        address: data.address,
        floor: this.store.apartmentData.floor,
        seats: this.store.apartmentData.seats,
        unit: this.store.apartmentData.unit,
        avatar: this.store.apartmentData.avatar,
        signContractDate: data.signContractDate,
        endContractDate: data.endContractDate,
        rent: parseInt(data.rent),
        country: data.country,
        leaseMonth: parseInt(data.leaseMonth),
        deposit: parseInt(data.deposit),
        callingCode: data.callingCode,
        rentNotification: data.rentNotification,
        endContractNotification: data.endContractNotification,
        rentNotificationId: data.rentNotificationId,
        remark: this.store.apartmentDataRemark,
        doc: this.store.apartmentDataDoc,
      };

      console.log(newApartment);

      if (this.store.logined) {
        await this.store.createApartmentPost(newApartment, true);
        await realm.write(() => {
          user[0].apartment.push(newApartment);
          newApartment.rentNotificationId.map(async (items, index) => {
            await user[0].notification.push(items);
          });
        });
        await this.store.loadLocalData();
        this.props.navigation.popToTop();
        //  await this.store.uploadDocFetch(newApartment.id,this.store.apartmentDataDoc),
      } else {
        try {
          await realm.write(() => {
            user[0].apartment.push(newApartment);
            newApartment.rentNotificationId.map(async (items, index) => {
              await user[0].notification.push(items);
            });
          });
        } catch (error) {
          console.log(error);
        }

        await this.store.loadLocalData();
        this.props.navigation.popToTop();
      }
      // history.pop(this,1)
    } catch (e) {
      console.log('Error on creation ' + e);
    }
  }

  saveAndroidImageHandler(image, type) {
    var photoId = this.store.idGenerator();
    return {
      id: photoId,
      name: photoId+'.jpg',
      type: this.type,
      createDate: new Date(),
      uri: image.path,
      mime: image.mime,
      height: image.height,
      width: image.width,
    };
  }

  async getPdfFile() {
    this.type = 4;
    try {
      const results = await DocumentPicker.pickMultiple({
        type: [DocumentPicker.types.pdf],
      });
      for (const res of results) {
        console.log(res);
        const split = res.uri.split('/');
        const name = split.pop();
        const inbox = split.pop();
        const realPath = `${RNFS.TemporaryDirectoryPath}${inbox}/${name}`;
        this.store.apartmentDataDoc.push(this.savePdfHandler(res, realPath));
        // const realPath = `file://${RNFetchBlob.fs.dirs.DocumentDir}/${res.name}`;
      }
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        // User cancelled the picker, exit any dialogs or menus and move on
      } else {
        throw err;
      }
    }
  }

  renderAddButton(type) {
    if (this.store.user.memberType == 0) {
      if (type <= 2) {
        return (
          <TouchableOpacity
            style={{marginLeft: 10, marginTop: 7}}
            onPress={() => {
              this.dialogPhotoVisable = true;
              this.type = type;
            }}>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                width: 111,
                height: 111,
                borderRadius: 5,
                borderColor: colors.textColor,
                borderWidth: 1,
              }}>
              <Icon name="plus-circle" color={colors.textColor} size={20} />
              <Text
                style={{
                  fontFamily: Fonts.ubuntuTh,
                  color: colors.textColor,
                  margin: 5,
                  fontSize: 15,
                }}
                numberOfLines={1}>
                {'新增圖片'}
              </Text>
            </View>
            <View style={{marginRight: 10}} />
          </TouchableOpacity>
        );
      } else if (type == 4) {
        return (
          <TouchableOpacity
            onPress={() => {
              this.getPdfFile();
            }}
            style={{
              alignItems: 'center',
              justifyContent: 'center',
              width: 120,
              height: 120,
            }}>
            {/* <FastImage style={{ width: 150, height: 100, backgroundColor: '#F2F3F4' }} resizeMode={FastImage.resizeMode.contain} source={image} /> */}
            <TouchableOpacity style={{marginLeft: 20}} />
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                width: 105,
                height: 105,
                borderRadius: 5,
                borderColor: colors.textColor,
                borderWidth: 1,
              }}>
              <Icon name="plus-circle" color={colors.textColor} size={20} />
              <Text
                style={{
                  fontFamily: Fonts.ubuntuTh,
                  color: colors.textColor,
                  margin: 5,
                  fontSize: 15,
                }}
                numberOfLines={1}>
                {'新增PDF'}
              </Text>
            </View>
            <View style={{marginRight: 20}} />
          </TouchableOpacity>
        );
      }
      return (
        <Icon
          name={'plus-circle'}
          style={{padding: 10}}
          color={colors.mainColor}
          size={30}
          onPress={() => {
            this.dialogPhotoVisable = true;
            this.type = type;
          }}
        />
      );
    }
  }

  // renderAddButton(type) {
  //   if (this.store.logined) {
  //     if (this.store.loginUserData.data.member.chara == 'owner') {
  //       return (
  //         <Icon
  //           name={'plus-circle'}
  //           style={{padding: 10}}
  //           color={colors.mainColor}
  //           size={30}
  //           onPress={() => {
  //             this.dialogPhotoVisable = true;
  //             this.type = type;
  //           }}
  //         />
  //       );
  //     }
  //   } else {
  //     return (
  //       <Icon
  //         name={'plus-circle'}
  //         style={{padding: 10}}
  //         color={colors.mainColor}
  //         size={30}
  //         onPress={() => {
  //           this.dialogPhotoVisable = true;
  //           this.type = type;
  //         }}
  //       />
  //     );
  //   }
  // }

  phChange(ph) {
    const appleId = ph.substring(5, 41);
    const ext = 'JPG';
    return `assets-library://asset/asset.${ext}?id=${appleId}&ext=${ext}`;
  }

  camerSaveImageAction(imageResult) {
    var self = this;
    var promise = CameraRoll.saveToCameraRoll(imageResult.path);
    promise
      .then(function(result) {
        if (Platform.OS === 'ios') {
          imageResult.path = self.phChange(result);
          Alert.alert(result);
          self.store.apartmentDataDoc.push(self.saveImageHandler(imageResult));
          console.log(self.store.apartmentDataDoc);
          self.store.loading = false;
        } else {
          imageResult.path = result;
          self.store.apartmentDataDoc.push(
            self.saveAndroidImageHandler(imageResult),
          );
          self.store.loading = false;
        }
      })
      .catch(function(error) {
        Alert.alert('error', error);
        self.store.loading = false;
        console.log('Save file failed\n' + error);
      });
  }

  avatarHander(which, multiple, cropping, type) {
    var shouldCrop = false;
    if (this.type === 0) {
      shouldCrop = true;
    }
    if (which) {
      this.store.loading = true;
      ImagePicker.openCamera({
        includeBase64: true,
        writeTempFile: false,
        mediaType: 'photo',
        cropping: false,
      }).then(image => {
        console.log(image);
        //  Alert.alert('imageResult', JSON.stringify(image));
        const response = image;
        this.store.loading = false;
        if (this.type === 0) {
          if (Platform.OS === 'ios') {
            var data = this.saveImageHandler(response);
            history.push(this, '/cropImage', {data});
          } else {
            var data = this.saveAndroidImageHandler(response);
            history.push(this, '/cropImage', {data});
          }
        } else {
          //  this.store.apartmentDataDoc.push(this.saveImageHandler(response))
          // this.camerSaveImageAction(response);
          if (Platform.OS === 'ios') {
            var data = this.saveImageHandler(response);
            history.push(this, '/cropImage', {data});
          } else {
            var data = this.saveAndroidImageHandler(response);
            history.push(this, '/cropImage', {data});
          }
        }

        // this.saveImage(response.path)
        // this.saveImageHandler(response)

        //this.store.apartmentData.avatar = response.path
      });
    } else {
      ImagePicker.openPicker({
        includeBase64: false,
        writeTempFile: false,
        multiple: true,
        mediaType: 'photo',
        cropping: false,
      }).then(image => {
        console.log(image);
        var response = image;
        response.map((item, index) => {
          if (Platform.OS === 'ios') {
            const uri = this.store.convertLocalIdentifierToAssetLibrary(
              item.localIdentifier,
              'JPG',
            );
            item.path = uri;
            console.log(item.path);
            this.store.apartmentDataDoc.push(this.saveImageHandler(item));
          } else {
            this.store.apartmentDataDoc.push(
              this.saveAndroidImageHandler(item),
            );
            console.log(this.store.apartmentDataDoc);
          }
        });
        // if (Platform.OS === 'ios') {
        //   const uri = this.store.convertLocalIdentifierToAssetLibrary(
        //     response.localIdentifier,
        //     'JPG',
        //   );
        //   response.path = uri;
        //   console.log(response.path);
        //   this.store.apartmentDataDoc.push(this.saveImageHandler(response));
        // } else {
        //   this.store.apartmentDataDoc.push(
        //     this.saveAndroidImageHandler(response),
        //   );
        // }
      });
    }
    this.dialogPhotoVisable = false;
  }

  updateImage(image, newCoordinates) {
    this.setState({
      image,
      rectangleCoordinates: newCoordinates,
    });
  }

  renderPDF() {
    if (this.store.apartmentDataDoc.length > 0) {
      return this.store.apartmentDataDoc.map((items, index) => {
        if (items.type === 4) {
          return (
            <TouchableOpacity
              onPress={() => {
                //this.clickAvatarAction(index);
                history.push(this, '/apartmentImageDetails', {
                  imageIndex: index,
                });
              }}
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                width: 120,
                height: 120,
              }}>
              {/* <FastImage style={{ width: 150, height: 100, backgroundColor: '#F2F3F4' }} resizeMode={FastImage.resizeMode.contain} source={image} /> */}
              <TouchableOpacity style={{marginLeft: 20}} />
              <View
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: 105,
                  height: 105,
                  borderRadius: 5,
                  borderColor: colors.textColor,
                  borderWidth: 1,
                }}>
                <Icon name="file-pdf" color={colors.textColor} size={50} />
                <Text
                  style={{
                    fontFamily: Fonts.ubuntuTh,
                    color: colors.textColor,
                    margin: 5,
                  }}
                  numberOfLines={1}>
                  {items.name}
                </Text>
              </View>
              <View style={{marginRight: 20}} />
              {this.renderDeleteButton(index)}
            </TouchableOpacity>
          );
        }
      });
    } else {
      return null;
    }
  }

  renderDeleteButton(index) {
    if (this.store.user.memberType == 0) {
      return (
        <TouchableOpacity
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            backgroundColor: 'white',
            borderRadius: 20,
          }}
          onPress={() => {
            this.deleteDocAlert(index);
          }}>
          <Icon
            name="times-circle"
            size={20}
            solid
            backgroundColor={'white'}
            color={colors.textColor}
          />
        </TouchableOpacity>
      );
    }
  }

  renderPic(type) {
    if (this.store.apartmentDataDoc.length > 0) {
      return this.store.apartmentDataDoc.map((items, index) => {
        if (type === items.type) {
          // const image = {id:items.filename,name:items.filename,type:items.type,createDate:items.createDate,uri:items.uri,mime:items.mime,height:items.height,width:items.width}
          return (
            <TouchableOpacity
              onPress={() => {
                //this.clickAvatarAction(index);
                this.clickAvatarAction(index);
              }}
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                width: 125,
                height: 125,
              }}>
              {/* <FastImage style={{ width: 150, height: 100, backgroundColor: '#F2F3F4' }} resizeMode={FastImage.resizeMode.contain} source={image} /> */}
              <TouchableOpacity style={{marginLeft: 20}} />
              <View
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: 111,
                  height: 111,
                  borderRadius: 5,
                  borderColor: colors.textColor,
                  borderWidth: 5,
                }}>
                <Image
                  style={{
                    width: 110,
                    height: 110,
                    borderRadius: 5,
                    backgroundColor: '#F2F3F4',
                  }}
                  source={{uri: items.uri}}
                />
              </View>
              <View style={{marginRight: 20}} />

              {this.renderDeleteButton(index)}
            </TouchableOpacity>
          );
        }
      });
    } else {
      return null;
    }
  }
  deleteDocAlert(index) {
    Alert.alert(
      '',
      'Are you sure?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: 'Yes',
          onPress: () => {
            this.deleteDoc(index);
          },
        },
      ],
      {cancelable: false},
    );
  }

  deleteDoc(index) {
    this.store.apartmentDataDoc.splice(index, 1);
  }

  async saveAction() {
    await this.store.saveDocEdit(this.props.navigation.state.params.index);
    await this.store.resetApartmentData();
    history.goBack(this);
  }

  renderButton() {
    if (!this.props.navigation.state.params.create) {
      if (this.store.logined) {
        if (this.store.user.memberType == 0) {
          return (
            <View style={{width: width, alignItems: 'center'}}>
              <TouchableOpacity
                onPress={() => {
                  this.saveAction();
                }}
                style={{
                  marginTop: 10,
                  marginBottom: 20,
                  backgroundColor: colors.mainColor,
                  width: width - 60,
                  height: 60,
                  borderRadius: 10,
                  shadowColor: '#000',
                  justifyContent: 'center',
                  alignItems: 'center',
                  shadowOffset: {
                    width: 0,
                    height: 2,
                  },
                  shadowOpacity: 0.23,
                  shadowRadius: 2.62,

                  elevation: 4,
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntu,
                    fontSize: 18,
                  }}>
                  Save
                </Text>
              </TouchableOpacity>
            </View>
          );
        }
      } else {
        return (
          <View style={{width: width, alignItems: 'center'}}>
            <TouchableOpacity
              onPress={() => {
                this.saveAction();
              }}
              style={{
                marginTop: 10,
                marginBottom: 20,
                backgroundColor: colors.mainColor,
                width: width - 60,
                height: 60,
                borderRadius: 10,
                shadowColor: '#000',
                justifyContent: 'center',
                alignItems: 'center',
                shadowOffset: {
                  width: 0,
                  height: 2,
                },
                shadowOpacity: 0.23,
                shadowRadius: 2.62,

                elevation: 4,
              }}>
              <Text
                style={{
                  color: 'white',
                  fontFamily: Fonts.ubuntu,
                  fontSize: 18,
                }}>
                Save
              </Text>
            </TouchableOpacity>
          </View>
        );
      }
    } else {
      return (
        <View style={{width: width, alignItems: 'center'}}>
          <TouchableOpacity
            onPress={() => {
              this.createApartmentAction();
              // history.push(this, '/addTenant');
            }}
            style={{
              marginTop: 10,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 10,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              {this.store.text.ok}
            </Text>
          </TouchableOpacity>
        </View>
      );
    }
  }

  onRequestClose = () => {
    this.visable = false;
  };

  render() {
    var data = [];
    const onRequestClose = () => (this.visable = false);
    this.store.apartmentDataDoc.map((items, index) => {
      if (items.type != 4) {
        var image = {uri: items.uri};
        data.push(image);
      }
    });

    return (
      <View
        style={{
          flex: 1,
        }}>
        <BackHeader instance={this} back={true} />
        <LoadingView visible={this.store.loading} />
        <ScrollView style={{flex: 1}}>
          <View style={{flex: 1, marginTop: 20}}>
            {/* <Text>
                {this.store.text.apartmentDataDoc[0].uri}
              </Text> */}
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={styles.title}>{this.store.text.docoument}</Text>
            </View>
            <ScrollView style={styles.subscroll} horizontal={true}>
              {this.renderPic(0)}
              {this.renderAddButton(0)}
            </ScrollView>
            <View style={styles.line} />
          </View>

          <View style={{flex: 1, marginTop: 20}}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={styles.title}>{this.store.text.photos}</Text>
            </View>
            <ScrollView style={styles.subscroll} horizontal={true}>
              {this.renderPic(1)}
              {this.renderAddButton(1)}
            </ScrollView>
            <View style={styles.line} />
          </View>

          <View style={{flex: 1, marginTop: 20}}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={styles.title}>{this.store.text.others}</Text>
            </View>
            <ScrollView style={styles.subscroll} horizontal={true}>
              {this.renderPic(2)}
              {this.renderAddButton(2)}
            </ScrollView>
            <View style={styles.line} />
          </View>
          <View style={{flex: 1, marginTop: 20}}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={styles.title}>PDF</Text>
            </View>
            <ScrollView style={styles.subscroll} horizontal={true}>
              {this.renderPDF()}
              {this.renderAddButton(4)}
            </ScrollView>
          </View>
          <View style={styles.line} />
        </ScrollView>
        {this.renderButton()}
        <ImageView
          HeaderComponent={imageIndex => {
            return (
              <ImageHeader
                onRequestClose={onRequestClose}
                onPress={() => {
                  this.store.saveImage(imageIndex);
                }}
              />
            );
          }}
          FooterComponent={({imageIndex}) => (
            <ImageFooter imageIndex={imageIndex} imagesCount={data.length} />
          )}
          visible={this.visable}
          onRequestClose={onRequestClose}
          images={data}
          presentationStyle={'overFullScreen'}
          imageIndex={this.imageIndex}
        />
        <Modal
          visible={this.dialogPhotoVisable}
          width={0.7}
          height={0.2}
          onTouchOutside={() => {
            this.dialogPhotoVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.dialogPhotoVisable = false;
          }}>
          <ModalContent>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <TouchableOpacity
                style={{alignItems: 'center'}}
                onPress={() => this.avatarHander(true, false, false, 0)}>
                <Icon name="camera" sholid color={colors.mainColor} size={40} />
                <Text
                  style={{fontFamily: Fonts.ubuntu, color: colors.mainColor}}>
                  {this.store.text.camera}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{alignItems: 'center', marginLeft: 30}}
                onPress={() => this.avatarHander(false, false, false, 0)}>
                <Icon name="images" sholid color={colors.mainColor} size={40} />
                <Text
                  style={{fontFamily: Fonts.ubuntu, color: colors.mainColor}}>
                  {this.store.text.gallery}
                </Text>
              </TouchableOpacity>
            </View>
          </ModalContent>
        </Modal>
        {/* {this.showImage()}
      <Image source={{uri:convertLocalIdentifierToAssetLibrary('C9F4A2B0-F076-40DA-A043-5440BCF63917/L0/001','JPG')}} style={{height:400,width:400}} /> */}
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  buttonText: {
    color: '#fff',
  },
  line: {
    width: width - 20,
    height: 1,
    marginTop: 5,
    marginLeft: 25,
    backgroundColor: colors.line2Color,
  },
  title: {
    fontFamily: Fonts.ubuntu,
    fontSize: 20,
    marginLeft: 25,
  },
  subscroll: {
    height: 130,
    marginTop: 10,
    marginLeft: 20,
    marginRight: 20,
  },
});
