import React, { Component } from "react";
import { Image, ScrollView, Text, View, TouchableOpacity, TextInput, Keyboard, TouchableWithoutFeedback, Platform, ImageBackground, StyleSheet, Animated, FlatList, } from "react-native";
import { inject, observer } from "mobx-react"
import Loading from '../../components/Loading';
import { observable, makeObservable, action } 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 MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'
import Carousel from 'react-native-snap-carousel';
import { images } from '../../assets/images/imageIndex'

Icon.loadFont();
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);



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

    latitude = 37.78825
    longitude = -122.4324
    latitudeDelta = 0.0922
    longitudeDelta = 0.0421




    constructor(props) {
        super(props);
        this.store = props.appStore
        makeObservable(this, {
            latitude: observable,
            longitude: observable,
            latitudeDelta: observable,
            longitudeDelta: observable,
            setRegion: action
        });


    }
    componentDidMount() {
        this.store.getStoreInfo(this)
    }

    setRegion(data) {
        this.latitude = data.latitude
        this.longitude = data.longitude
        this.latitudeDelta = data.latitudeDelta
        this.longitudeDelta = data.longitudeDelta
    }

    getRegion() {
        return {
            latitude: this.latitude,
            longitude: this.longitude,
            latitudeDelta: this.latitudeDelta,
            longitudeDelta: this.longitudeDelta,
        }
    }

    _renderItem = ({ item, index }) => {
        return (
            <View style={{ width: width * 0.7, height: height / 4, backgroundColor: colors.aboutColor,borderRadius:s(20),justifyContent: 'center', }}>
                <Text style = {{marginHorizontal:20,color:colors.textColor,fontWeight:'800'}}>{item.name}</Text>
                <Text style = {{marginHorizontal:20,marginTop:10,color:colors.textColor,}}>{I18n.t('address')+':'}</Text>
                <Text style = {{marginHorizontal:20,color:colors.textColor,}}>{item.addr}</Text>
                <Text style = {{marginHorizontal:20,marginTop:10,color:colors.textColor,}}>{I18n.t('businessHours')+':'}</Text>
                <Text style = {{marginHorizontal:20,color:colors.textColor,}}>{item.businessHours}</Text>
                <Text style = {{marginHorizontal:20,marginTop:10,color:colors.textColor,}}>{I18n.t('phoneNumber')+':'}</Text>
                <Text style = {{marginHorizontal:20,color:colors.textColor,}}>{item.tel}</Text>
            </View>
        );
    }

    scrollItemHandler(index) {
        const data = {
            latitude: parseFloat(this.store.storeInfo[index].lat),
            longitude: parseFloat(this.store.storeInfo[index].lng),
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
        }
        this.setRegion(data)
    }

    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('storeInformation')}
                    </Text>
                </View>

                <MapView
                    style={{  marginHorizontal: 20,marginVertical:20,borderWidth:2,borderColor:colors.textColor, borderRadius:30,height:height/2,width:width-40}}
                    region={{
                        latitude: this.latitude,
                        longitude: this.longitude,
                        latitudeDelta: this.latitudeDelta,
                        longitudeDelta: this.longitudeDelta,
                    }}
                >
                    <Marker
                        coordinate={{ latitude: this.latitude, longitude: this.longitude }}
                    />
                </MapView>

                <View style={{ position: 'absolute', bottom: 30, width: width }}>
                    <Carousel
                        ref={(c) => { this._carousel = c; }}
                        data={this.store.storeInfo}
                        renderItem={this._renderItem}
                        sliderWidth={width}
                        itemWidth={width * 0.7}
                        onSnapToItem={(index) => this.scrollItemHandler(index)}
                    />
                </View>

                <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, },
    },
    listStores: {
        marginBottom: 15,
        width: '100%',
        position: 'absolute',
        bottom: 0
    }
})

export default StoreInfo
