import React, {Component} from 'react';
import Video from 'react-native-video';
import {View, Text, TouchableOpacity, StyleSheet, Image} from 'react-native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from 'react-navigation-stack';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {colors} from '../../assets/styles/colors-theme';
import JMessage from 'jmessage-react-plugin';
import {Fonts} from '../../assets/styles/fonts-theme';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import LoadingView from '../../common/loading';
import Toast, {DURATION} from 'react-native-easy-toast';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Migrations from '../../services/realm/Mirgrations';
import {inject, observer} from 'mobx-react';
import {queryUser} from '../../services/realm/realmManger';
import ImageZoom from 'react-native-image-pan-zoom';
import Swiper from 'react-native-swiper';
import Global from '../../services/Global';
import AddFunction from '../../common/addFunction';
import {width, height} from '../../common/screen';
import {observable} from 'mobx';
@inject('appStore')
@observer
export default class ImageDetails extends Component {
  @observable
  loading = false;
  @observable
  imageUri = '';
  @observable
  data = this.props.navigation.state.params.data;
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }
  static navigationOptions = {
    gesturesEnabled: false,
    cardStyleInterpolator: props =>
      CardStyleInterpolators.forVerticalIOS(props),
  };

  renderIcon(items) {
    return (
      <TouchableOpacity
        style={{justifyContent: 'center', alignItems: 'center'}}>
        <Icon name={items.icon} size={50} solid color={colors.mainColor} />
        <Text style={{fontFamily: Fonts.ubuntu, marginTop: 10}}>
          {items.title}
        </Text>
      </TouchableOpacity>
    );
  }
  componentWillMount() {
    // if (this.props.navigation.state.params.data.messageType == 'image') {
    //   this.loading = true;
    //   JMessage.downloadOriginalImage(
    //     this.props.navigation.state.params.data,
    //     result => {
    //       var msgId = result.messageId;
    //       var imgPath = result.filePath;
    //       this.imageUri = imgPath;
    //       this.loading = false;
    //       //Alert.alert('onSendGalleryFiles', JSON.stringify(imgPath));
    //     },
    //     error => {
    //       var code = error.code;
    //       var desc = error.description;
    //       this.loading = false;
    //     },
    //   );
    // }
  }

  renderMain() {
    if (this.props.navigation.state.params.data.messageType == 'image') {
      return (
        <View
        style={{flex: 1, justifyContent: 'center', alignContent: 'center'}}>
          <ImageZoom cropWidth={width}
                       cropHeight={ height-120}
                       imageWidth={width}
                       imageHeight={ height-120}>
        <Image
          style={{width: width, height: height-120}}
          source={{uri: this.props.navigation.state.params.data.mediaPath}}
          resizeMode = {'contain'}
        />
        </ImageZoom>
        </View>
      );
    } else {
      console.log(this.props.navigation.state.params.data);
      return (
        <View
          style={{flex: 1, justifyContent: 'center', alignContent: 'center'}}>
          <Video
            source={{uri: this.props.navigation.state.params.data.mediaPath}} // Can be a URL or a local file.
            ref={ref => {
              this.player = ref;
            }} // Store reference
            onBuffer={this.onBuffer} // Callback when remote video is buffering
            onError={this.videoError} // Callback when video cannot be loaded
            style={styles.backgroundVideo}
          />
        </View>
      );
    }
  }
  render() {
    const object = [
      {icon: 'building', title: this.store.text.addApartment},
      {icon: 'file-contract', title: this.store.text.addContract},
    ];
    return (
      <View style={{flex: 1, alignItems: 'center',backgroundColor:'black'}}>
        <TouchableOpacity
          style={{
            height: 50,
            width: width,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: colors.mainColor,
          }}
          onPress={() => {
            history.goBack(this), (this.loading = false);
          }}>
          <Icon name="sort-down" solid size={20} color={'white'} />
        </TouchableOpacity>
        <LoadingView visible={this.loading} />
        {this.renderMain()}

        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  buttonText: {
    color: '#fff',
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  shadowView: {
    width: scale(280),
    height: verticalScale(450),
    alignItems: 'center',
    borderWidth: 0.5,
    backgroundColor: 'white',
    borderColor: '#EAEDED',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },

  text: {
    fontFamily: Fonts.ubuntu,
    marginTop: 10,
    color: colors.mainColor,
  },
  iconView: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundVideo: {
    width: width,
    height: height-120,
    backgroundColor:'black'
  },
});
