import React from 'react';
import {
    SafeAreaView,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Image,
    ImageBackground,
    ScrollView
} from 'react-native';
var _ = require('lodash');
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
import Loading from '../../components/Loading';
import Toast, { DURATION } from 'react-native-easy-toast';
import { inject, observer } from "mobx-react"
import { Col, Grid, Row } from "react-native-easy-grid";
import TitleBar from '../../components/titleBar'
import { observable, makeObservable } from 'mobx'
import { WebView } from 'react-native-webview';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import ListTitle from '../../components/listTitle';
import I18n from '../../services/i18n'
import { s, vs, ms, mvs } from 'react-native-size-matters';
import { images } from '../../assets/images/imageIndex';
import RenderProducts from '../../components/renderProducts';
import HTMLView from 'react-native-htmlview';
import moment from 'moment';
import QRCode from 'react-native-qrcode-svg';
import CustomLoginButton from '../../components/customLoginButton'
import ProgressiveFastImage from "@freakycoder/react-native-progressive-fast-image";
const CouponDetails = inject("appStore")(observer(class CouponDetails extends React.Component {

    data = this.props.route.params.data
    couponText = '<ul><li><p>條款及細則</p><p>・憑此券於⾹港SOYA 3.3分店使⽤。</p><p>・此券有效期由2022年2⽉1⽇⾄2023年1⽉31⽇。</p><p>・此券不能兌換現⾦及找贖。</p><p>・此券如有過期即作廢無效，恕不補發。</p><p>・付款前請先出示此券。</p><p>・此券只可使⽤⼀次。</p><p>・此券需於有效期內使⽤，逾期作廢。</p><p>・資料及圖⽚由商⼾提供，只供參考。</p><p>・如分店地址有任何更改，恕不另⾏通知。</p><p>・如有任何爭議，SOYA 3.3將保留最終決定權。</p></li></ul>'
    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {


        })
    }


    async componentWillMount() {

    }



    couponTypeHandler(item) {
        if (item.discountAmount > 0) {
            return '$' + item.discountAmount + "現金券"
        } else {
            return item.discountRate * 100 + "%折扣優惠"
        }
    }


    renderImage() {
        return (
            <View style={{ justifyContent: 'center', alignItems: 'center', width: width, marginTop: 20 }}>
                {this.data.hasOwnProperty('imgURL') ? (<Image source={{ uri: this.data.imgURL }} style={{ width: width - 40, height: s(200), borderRadius: s(30) }} resizeMode='contain' />) :
                    (<Image source={images.coupon} style={{ width: width - 40, height: s(200), borderRadius: s(30) }} resizeMode='contain' />)}

            </View>

        )
    }
    renderContent() {
        return (
            <View style={{ backgroundColor: '#FFC76F', marginHorizontal: 20, marginVertical: 30, borderRadius: width / 20 }}>
                <View style={{ margin: 20, marginBottom: 50, }}>
                    <Text style={{ color: colors.fontColor, fontSize: 11 }}>
                        {I18n.t('offerPeriod') + ": " + moment(this.data.start, 'YYYY-MM-DD').format('DD/MM/YYYY') + " - " + moment(this.data.end, 'YYYY-MM-DD').format('DD/MM/YYYY')}
                    </Text>
                    <Text style={{ color: colors.fontColor, fontSize: 15, fontWeight: '800', marginTop: 5 }}>
                        {this.data.name}
                    </Text>
                    <View style={{ width: '100%', alignItems: 'center', marginVertical: 20 }}>
                        <View style={{ width: '90%', height: s(50), borderRadius: s(10), backgroundColor: colors.fontColor, justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: 'white', fontSize: 15, fontWeight: '800', marginTop: 5 }}>
                                {this.couponTypeHandler(this.data)}
                            </Text>
                        </View>

                    </View>
                    <HTMLView
                        style={{ marginTop: 10, }}
                        value={this.couponText}
                        stylesheet={styles.content}
                        textComponentProps={{ style: { color: colors.fontColor, fontSize: 11, marginTop: -40 } }}
                    />
                    <View style={{ width: '100%', alignItems: 'center', marginVertical: 20 }}>
                        <QRCode
                            value={this.store.loginUserData?.id + "," + this.data.number}
                            size={140}
                        />
                    </View>
                </View>
                <Image source={images.titleLogo} style={{ position: 'absolute', bottom: -20, right: 0 }} />
            </View >
        )
    }



    render() {
        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('cartCoupon')}
                    </Text>
                </View>

                <ScrollView>
                    {this.renderImage()}
                    {this.renderContent()}
                </ScrollView>
                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.mainColor }}
                    position="center"
                    positionValue={100}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </ImageBackground>

        );
    }
}))
const styles = StyleSheet.create({
    titleText: {
        color: colors.fontColor,
        fontSize: 13,
        fontWeight: '800'
    },
    content: {
        margin: 20,
        br: { marginTop: -120, fontSize: 12, },
    },
});

export default CouponDetails
