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 ProgressiveFastImage from "@freakycoder/react-native-progressive-fast-image";
const Main = inject("appStore")(observer(class Main extends React.Component {

    activeSlide = 0;

    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {
            activeSlide: observable
        })
    }


    async componentWillMount() {

    }

    renderBanner({ item, index }) {
        return (
            <View style={{}}>
                <ProgressiveFastImage
                    resizeMode='cover'
                    source={{ uri: item.img_url }}
                    style={{ width: width - 40, height: width / 2.5, borderRadius: 30 }}
                />
            </View>
        );
    }

    get pagination() {
        return (
            <Pagination
                dotsLength={this.store.topBanners.length}
                activeDotIndex={this.activeSlide}
                containerStyle={{ marginTop: -20 }}
                dotStyle={{
                    width: 10,
                    height: 5,
                    borderRadius: 5,
                    marginHorizontal: 1,
                    backgroundColor: 'black'
                }}
                dotContainerStyle={
                    { marginHorizontal: 0.1 }
                }
                inactiveDotStyle={
                    {
                        // Define styles for inactive dots here
                    }
                }
                inactiveDotOpacity={0.4}
                inactiveDotScale={0.6}
            />
        );
    }



    renderRecommend(item) {
        return (
            <RenderProducts item={item} />
        )
    }

    renderRecommendList() {
        if (this.store.recommendProducts.length > 0) {
            return (
                <View style={{ width: width, marginTop: 20,marginBottom:20}}>
                    <ListTitle title={I18n.t('homeFeatureProducts')} />
                    <View style={{ height: 20 }} />
                    {this.store.recommendProducts.map((items, index, array) => {
                        const newRow = !(index % 2);
                        const secondItem = index + 1 < array.length ? array[index + 1] : undefined;
                        return (
                            <View style={{ marginHorizontal: 10, }}>
                                <Row key={items.id} style={{ width: '100%', justifyContent: 'space-between', marginTop: 10 }} >
                                    {!!newRow ? (
                                        <>
                                            {this.renderRecommend(items)}
                                            {secondItem == undefined ? (<View style={{ width: s(170), height: s(210) }} />) : (this.renderRecommend(secondItem))}
                                        </>
                                    ) : null}
                                </Row>
                            </View>
                        )
                    })}
                </View>
            )
        }
    }

    renderBannerList() {
        return (
            <View
                style={{
                    width: width,
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: 40,

                }}>
                <Carousel
                    data={this.store.topBanners}
                    renderItem={this.renderBanner}
                    onSnapToItem={index => {
                        this.activeSlide = index;
                    }}
                    sliderWidth={width}
                    itemWidth={width - 40}


                />
                {this.pagination}

            </View>
        )
    }

    renderNews(item) {
        console.log(item)
        return (
            <TouchableOpacity style={{ height: s(280), width: s(150), marginLeft: 10, borderRadius: 15 }}
                onPress={() => { this.props.navigation.navigate('NewsDetails', { data: item }) }}>
                <View style={{ width: '100%', height: '70%' }}>
                    <ProgressiveFastImage source={{ uri: item.imageURL }} style={{ width: '100%', height: '100%', borderTopLeftRadius: 15, borderTopRightRadius: 15 }} />
                </View>
                <View style={{ position: 'absolute', width: '100%', height: '35%', backgroundColor: colors.listItemsbgc, bottom: 0, borderRadius: 15 }}>
                    <View style={{ marginVertical: 5, marginHorizontal: 10 }}>
                        <Text style={{ fontSize: 11, color: colors.fontColor }}>
                            {item.date}
                        </Text>
                        <Text numberOfLines={2} style={{ fontSize: 13, color: colors.fontColor, marginTop: 3, fontWeight: '800' }}>
                            {item.title}
                        </Text>
                        <Text numberOfLines={2} style={{ fontSize: 11, color: colors.fontColor, marginTop: 5, }}>
                            {item.content.replace(/(<([^>]+)>)/ig, "")}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    renderNewsList() {
        return (
            <View style={{ width: width }}>
                <ListTitle title={I18n.t('news')} onPress = {()=>{this.props.navigation.navigate('NewsList')}} />
                <ScrollView horizontal={true} style={{ marginTop: 50 }}>
                    {this.store.news.map((item, index) => {
                        return (
                            this.renderNews(item)
                        )
                    })}
                </ScrollView>
            </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={false} user={true} />
                <ScrollView style = {{marginTop:15}}>
                    {this.renderBannerList()}
                    {this.renderNewsList()}
                    {this.renderRecommendList()}
                </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({

});

export default Main
