import React, { Component } from "react";
import { Image, ScrollView, Text, View, TouchableOpacity, TextInput, Keyboard, TouchableWithoutFeedback, Platform, ImageBackground, StyleSheet } from "react-native";
import { inject, observer } from "mobx-react"
import Loading from '../../components/Loading';
import { observable, makeObservable } from 'mobx'
import Toast, { DURATION } from 'react-native-easy-toast';
import { colors } from '../../assets/styles/colors-theme';
import { width, height } from '../../services/screen'
import { s, vs, ms, mvs } from 'react-native-size-matters';
import HTMLView from 'react-native-htmlview';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons'
import I18n from '../../services/i18n'
import TitleBar from '../../components/titleBar'
import { images } from '../../assets/images/imageIndex'
Icon.loadFont();



const loyaltyProgramTerms = inject("appStore")(observer(class loyaltyProgramTerms extends React.Component {

    constructor(props) {
        super(props);
        this.store = props.appStore
        makeObservable(this, {

            //  settingItems: observable
        });
    }
    componentDidMount() {
        this.store.getLoyaltyProgramTerms()
    }

    renderContent() {
        return (
            <View style={{ backgroundColor: colors.listItemsbgc2, marginHorizontal: 20, marginVertical: 30, borderRadius: width / 20 }}>
                <HTMLView
                    style={{ margin: 20, marginBottom: 50, fontColor: colors.fontColor }}
                    value={this.store.loyaltyProgramTerms}
                    stylesheet={styles.content}
                    textComponentProps={{ style: { color: colors.fontColor } }}
                />
            </View>
        )
    }


    render() {
        console.log(this.store.lang)
        return (
            <ImageBackground resizeMode='cover' style={{ flex: 1, backgroundColor: colors.bgc }} source={require('../../assets/images/background.png')} >
                <Loading loading={this.store.loading} />
                <TitleBar navigation={this.props.navigation} back={true} user={true} />
                <View style={{ width: width, alignItems: 'center', marginTop: 30, }}>
                    <Text style={{ fontWeight: '800', color: colors.fontColor, fontSize: 15 }}>
                        {I18n.t('loyaltyProgramTermsAndConditions')}
                    </Text>
                </View>
                <ScrollView >
                    {this.renderContent()}
                </ScrollView>


                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.BORDER_PINK }}
                    position="center"
                    positionValue={200}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </ImageBackground>

        );
    }
}))

const styles = StyleSheet.flatten({
    titleText: {
        color: colors.fontColor,
        fontSize: 13,
        fontWeight: '800'
    },
    content: {
        margin: 20,
        br: { marginTop: -30, fontSize: 18, },
    },
})

export default loyaltyProgramTerms
