import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    View,
    TouchableOpacity,
    Alert,
    SafeAreaView,
    Text,
    TextInput,
    Image,
    FlatList,
    StatusBar
} from 'react-native';
import { observable, action, transaction } from 'mobx';
import { observer, inject } from 'mobx-react';
var _ = require('lodash');
import moment from 'moment'
import Loading from '../../components/Loading';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Icon2 from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CustomLoginButton from '../../components/customLoginButton';
import Toast, { DURATION } from 'react-native-easy-toast';
import GallerySwiper from 'react-native-gallery-swiper';
import images from '../../assets/images/imageIndex'
import { colors } from '../../assets/styles/colors-theme';
import TitleBar from '../../components/titleBar';
import HTMLView from 'react-native-htmlview';
import Menu, {
    MenuProvider,
    MenuTrigger,
    MenuOptions,
    MenuOption,
    renderers,
} from 'react-native-popup-menu';
const { SlideInMenu } = renderers;
import {
    CreditCardInput,
    LiteCreditCardInput,
} from 'react-native-credit-card-input';
//component
import AppIntroSlider from 'react-native-app-intro-slider';
// function
import { width, height } from '../../services/screen';
import { Colors } from 'react-native/Libraries/NewAppScreen';
Icon.loadFont();

const slides = [
    {
        key: '1',
        title: '',
        text: '',
        image: require('../../assets/images/tut1.png'),
    },

    {
        key: '2',
        title: '',
        text: '',
        image: require('../../assets/images/tut2.png'),

    },
    {
        key: '3',
        title: '',
        text: '',
        image: require('../../assets/images/tut3.png'),

    }
];
const MyStatusBar = ({ backgroundColor, ...props }) => (
    <View style={[styles.statusBar, { backgroundColor }]}>
        <SafeAreaView>
            <StatusBar translucent backgroundColor={backgroundColor} {...props} />
        </SafeAreaView>
    </View>
);
const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
//const log = new Log()
@inject('appStore')
@observer
export default class Tutorial extends Component {


    constructor(props) {
        super(props);
        this.store = props.appStore;
    }
    async componentWillMount() {

    }
    componentDidMount() {

    }

    _keyExtractor = (item: Item) => item.title;


    _renderItem = ({ item }) => {
        return (

            <View style={{
                flex: 1, alignItems: 'center',
                justifyContent: 'center',
            }}>

                <Image source={item.image} style={{ width: width, height: height, }} resizeMode='contain' />

            </View>
        );
    }

    _onDone = () => {
        this.props.navigation.goBack()
    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: colors.backgroundColor }}>
                {/* <MyStatusBar backgroundColor= {colors.mainColor} barStyle="light-content" /> */}
                <StatusBar
                    animated={true}
                    barStyle={'default'}
                    backgroundColor={'red'}
                    translucent={true}
                />
                <AppIntroSlider renderItem={this._renderItem} data={slides} onDone={this._onDone} keyExtractor={this._keyExtractor} />

            </SafeAreaView >
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
    },

    button: {
        marginTop: 20,
        width: width,
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colors.statusBarColor,
    },
    inputTextView: {
        width: width - 40,
        marginTop: 20,
        borderBottomWidth: 1,
        borderBottomColor: colors.line2Color,
        height: 50,
    },
    inputTextTitleView: {
        fontSize: 14,
        color: colors.line2Color,
    },
    title: {
        fontSize: 17,
        marginTop: 20,
    },
    subtitle: {
        fontSize: 14,
    },
    buttonText: {
        color: '#fff',
    },
    picker: {
        fontSize: 20,
        paddingVertical: 12,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: 'black',
        borderRadius: 4,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
    textView: {
        color: colors.mainColor,

        fontSize: 20,
        fontWeight: 'bold',
    },
});
const pickerSelectStyles = StyleSheet.create({
    inputIOS: {
        fontSize: 16,
        paddingVertical: 12,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
    inputAndroid: {
        fontSize: 16,
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderWidth: 0.5,
        borderColor: 'black',
        borderRadius: 8,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
    container: {
        flex: 1,
    },
    statusBar: {
        height: STATUSBAR_HEIGHT,
    },
    appBar: {
        backgroundColor: '#79B45D',
        height: APPBAR_HEIGHT,
    },
    content: {
        flex: 1,
        backgroundColor: '#33373B',
    },
});
