import React, {Component} from 'react';
import Video from 'react-native-video';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
} from 'react-native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from 'react-navigation-stack';
var RNFS = require('react-native-fs');
import ImageHeader from '../../components/imageHeader';
import ImageFooter from '../../components/imageFooter';
import BackHeader from '../../components/backHeader';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {colors} from '../../assets/styles/colors-theme';
import Pdf from 'react-native-pdf';
import WebView from 'react-native-webview'
import JMessage from 'jmessage-react-plugin';
import {Fonts} from '../../assets/styles/fonts-theme';
import ImageView from 'react-native-image-viewing';
import ImageViewer from 'react-native-image-zoom-viewer';
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';
import {overlay} from 'react-native-paper';
@inject('appStore')
@observer
export default class ApartmentImageDetails extends Component {
  @observable
  loading = false;
  @observable
  imageUri = '';
  @observable
  index = this.props.navigation.state.params.imageIndex;
  @observable
  imageUri = '';
  @observable
  imagedata = [];
  @observable
  visable = true;
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }
  static navigationOptions = {
    gesturesEnabled: false,
    cardStyleInterpolator: props =>
      CardStyleInterpolators.forVerticalIOS(props),
  };

  renderPic(type) {
    if (this.store.apartmentDataDoc.length > 0) {
      return this.store.apartmentDataDoc.map((items, index) => {
        // 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.index = index;
            }}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              width: 40,
              height: 40,
            }}>
            {/* <FastImage style={{ width: 150, height: 100, backgroundColor: '#F2F3F4' }} resizeMode={FastImage.resizeMode.contain} source={image} /> */}
            <TouchableOpacity style={{marginLeft: 20}} />
            <Image
              style={{
                width: scale(40),
                height: scale(40),
                backgroundColor: '#F2F3F4',
              }}
              resizeMode={'contain'}
              source={{uri: items.uri}}
            />
            <View style={{marginRight: 20}} />
          </TouchableOpacity>
        );
      });
    } else {
      return null;
    }
  }



  getImageUri() {
    this.imageUri = this.store.apartmentDataDoc[this.index].uri;
    return this.imageUri;
  }
  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>
    );
  }
  async componentWillMount() {
    var imagedata = [];
    await this.store.apartmentDataDoc.map((items, index) => {
      imagedata.push(items);
    });
    this.imagedata = imagedata;
  }

  renderImage() {
    return this.store.apartmentDataDoc.map((items, index) => {
      return (
        <ImageZoom
          panToMove={false}
          cropWidth={width}
          cropHeight={height - 120}
          imageWidth={width}
          imageHeight={height - 120}>
          <Image
            style={{width: width, height: height - 120}}
            source={{uri: items.uri}}
            resizeMode={'contain'}
          />
        </ImageZoom>
      );
    });
  }

  header() {
    return (
      <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>
    );
  }


  handleError = (error: Error) => {
   console.log(Error)
  }

  renderMain() {
    var data = [];
    const onRequestClose = () => this.visable = false;
    this.store.apartmentDataDoc.map((items, index) => {
      var image = {uri: items.uri};
      data.push(image);
    });
    return (
      <View
        style={{flex: 0.8, justifyContent: 'center', alignContent: 'center'}}>
        {/* <Swiper
          key={this.store.apartmentDataDoc.length}
          loop={false}
          index={this.index}
          removeClippedSubviews={false}
          showsPagination={false}
          showsButtons={false}
          onIndexChanged={index => {
          
          }}>
          {this.renderImage()}
        </Swiper>  */}
        <ImageView
          HeaderComponent={() => {
            return <ImageHeader onRequestClose={onRequestClose} />;
          }}
          FooterComponent={({ imageIndex }) => (
            <ImageFooter imageIndex={imageIndex} imagesCount={data.length} />
          )}
          visible={this.visable}
          onRequestClose={onRequestClose}
          images={data}
          presentationStyle={'overFullScreen'}
          imageIndex={this.index}
        />
      </View>
    );
  }
  render() {
    const object = [
      {icon: 'building', title: this.store.text.addApartment},
      {icon: 'file-contract', title: this.store.text.addContract},
    ];
    console.log(this.store.apartmentDataDoc[this.index].uri)
    const source = {uri:this.store.apartmentDataDoc[this.index].uri,cache:false};
   
    return (
      <View style={{flex: 1, backgroundColor: 'black'}}>
         <BackHeader instance={this} back={true} />
        {/* <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()}
        <View style={{position: 'absolute', bottom: 0}}>
          <ScrollView horizontal={true}>{this.renderPic()}</ScrollView>
        </View>
        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        /> */}
        <Pdf
                    source={source}
                    onLoadComplete={(numberOfPages,filePath)=>{
                        console.log(`number of pages: ${numberOfPages}`);
                    }}
                    onPageChanged={(page,numberOfPages)=>{
                        console.log(`current page: ${page}`);
                    }}
                    onError={(error)=>{
                        console.log(error);
                    }}
                    onPressLink={(uri)=>{
                        console.log(`Link presse: ${uri}`)
                    }}
                    style={styles.pdf}/>
       {/* <WebView 
      source={{ uri: "https://reactnativemaster.com/wp-content/uploads/2020/02/React-native-document-viewer-pdf-sample.pdf" }} /> */}
      </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,
  },
  pdf: {
    flex:1,
    width:width,
    height:height,
},

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