import React from 'react';
import {
    SafeAreaView,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Image,
    ScrollView,
    Share,
    Alert,
    Linking,
} from 'react-native';
import FastImage from 'react-native-fast-image'
var _ = require('lodash');
import Toast, { DURATION } from 'react-native-easy-toast';
import Switch from 'react-native-switch-pro';
import { width, height } from '../../services/screen';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import Loading from '../../components/Loading';
import { inject, observer } from 'mobx-react';
import { colors } from '../../assets/styles/colors-theme';
import Rank from '../../components/rank';
import TitleBar from '../../components/titleBar';
import CustomLoginButton from '../../components/customLoginButton';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { observable } from 'mobx';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import * as Progress from 'react-native-progress';
import FeatherIcon from 'react-native-vector-icons/dist/Feather';
import FontAwesomeIcon from 'react-native-vector-icons/dist/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
//import Adyen from 'adyen-react-native';


FontAwesomeIcon.loadFont();
@inject('appStore')
@observer
export default class FullScreen extends React.Component {
    @observable
    select = false;
    @observable
    data = [];

    constructor(props) {
        super(props);
        this.store = props.appStore;
        this.data = this.props.route.params.data;
    }



    async componentWillMount() { }

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    backgroundColor: colors.bgc,

                }}>
                <Loading loading={this.store.loading} />

                <View style={styles.naviBar}>
                    <View style={[styles.barAreaView]}>
                        <TouchableOpacity
                            style={{
                                flex: 0.2,
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}
                            onPress={() => {
                                this.props.navigation.goBack();
                            }}>
                            <Icon name="ios-arrow-back" color={'black'} size={40} />
                        </TouchableOpacity>
                        <View
                            style={{
                                flex: 0.8,
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}>
                            {/* <Text style={{ fontSize: 22, fontWeight: '800' }}>
                                {this.store.text.manageMembers}
                            </Text> */}
                        </View>
                        <TouchableOpacity
                            style={{
                                flex: 0.2,
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}
                        // onPress={() => (this.select = !this.select)}
                        >
                            {/* <Text style={{fontSize: 15, color: colors.mainColor}}>
                {this.select ? this.store.text.cancel : this.store.text.select}
              </Text> */}
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{
                    width: width ,
                    height: height - 80,
                    justifyContent: 'center',
                    alignItems:'center'

                }}>
                    <FastImage
                        source={{ uri: this.props.route.params.uri }}
                        style={{
                            width: width - 40,
                            height: height - 80,

                        }}
                        resizeMode={FastImage.resizeMode.contain} />
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.flatten({
    naviBar: {
        width,
        height: Platform.OS === 'ios' ? 70 : 75,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
    },
    barAreaView: {
        flex: 1,
        marginRight: 20,
        marginLeft: 20,
        marginTop: Platform.OS === 'ios' ? -5 : 15,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },

    subView: {
        marginTop: 20,
        width: width - 40,
    },
    labelText: {
        color: colors.labelColor,
        fontSize: 12,
    },
    lineView: {
        height: 1,
        width: width - 40,
        backgroundColor: colors.lineColor,
        marginTop: 20,
    },
    pointsTextView: {
        fontSize: 25,
        fontWeight: '800',
    },
});
