import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    View,
    TouchableOpacity,
    Alert,
    SafeAreaView,
    Text,
    TextInput,
    Image,
    ScrollView
} from 'react-native';
import { observable, action, transaction } from 'mobx';
import { observer, inject } from 'mobx-react';
var _ = require('lodash');
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 { 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

// function
import { width, height } from '../../services/screen';
Icon.loadFont();

//const log = new Log()
@inject('appStore')
@observer
export default class News extends Component {
    @observable
    data = this.props.route.params.data;
    @observable
    imageData = [];
    constructor(props) {
        super(props);
        this.store = props.appStore;
    }
    async componentWillMount() {
        this.data.images.map((items, index) => {
            var data = {
                uri: items.imageURL,
            };
            this.imageData.push(data);
        });
    }
    componentDidMount() {
        console.log(this.data)
    }

    saveAction() {
        if (this.data.last_name != '') {
            if (this.data.first_name != '') {
                this.store.editName(this.data, this);
            } else {
                this.refs.toast.show(this.store.text.pleaseInputFirstName);
            }
        } else {
            this.refs.toast.show(this.store.text.pleaseInputLastName);
        }
    }

    render() {
        return (
            <MenuProvider
                style={{ flex: 1, backgroundColor: colors.bgc, alignItems: 'center' }}>
                <Loading loading={this.store.loading} />
                <TitleBar
                    showBack={true}
                    title={this.data.title}
                    self={this}
                />
                <ScrollView>
                    <View style={{ width: width - 40, justifyContent: 'center', alignItems: 'center' }}>
                        {/* <Image style={{ width: width - 40, height: 200 }} source={{ uri: this.data.imageURL }} resizeMode='contain' /> */}
                        <GallerySwiper
                            style={{ width: width - 50, height: 400, marginTop: 20, marginLeft: 25 }}
                            images={this.imageData}
                            enableResistance={false}
                            removeClippedSubviews={false}
                        />
                    </View>
                    <View style={{ margin: 20 }}>
                        <HTMLView
                            value={this.data.content}
                            addLineBreaks={false}
                            stylesheet={{
                                marginTop: 20,
                                br: { marginTop: -25, fontSize: 18 },
                                p: { marginTop: -25, fontSize: 15 }
                            }}

                        />
                    </View>

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

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
    },
});
