import React, { Component } from 'react';
import { View, Image, StyleSheet, ImageBackground, Dimensions, ScrollView, Linking } from 'react-native';
import { H3, Text, Card, CardItem, Button, Container, Content, Toast } from 'native-base';
import Carousel from 'react-native-snap-carousel';
import HTML from 'react-native-render-html';
import axios from 'axios';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Callout } from 'react-native-maps';
import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
import RF from 'react-native-responsive-fontsize';
import Loading from '../components/Loading';
import AppHeader from '../components/AppHeader';

export default class PageDetailCarousel extends Component {

    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            activeSlide: 0,
            type: 'carousel',
            isLoading: false,
            error: '',
            items: []
        }
        this.reRenderSomething = this.props.nav.addListener('willFocus', () => {
            this.componentDidMount();
        });
    }

    componentDidMount() {
        this.getItems(this.props.url);
    }

    showErrorToast = () => {
        this.setState({ isLoading: false });
        Toast.show({
            text: I18n.t('internetErrorText'),
            type: "danger",
            x: 0,
            y: 0,
            duration: 3000,
            position: "top"
        });
    }

    getItems = (url_path) => {
        this.setState({ isLoading: true });
        axios.create({ headers: { 'from-app': '1' } }).get(url_path)
            .then(result =>
                this.setState({
                    items: result.data.page,
                    isLoading: false
                })
            )
            .catch(error => this.showErrorToast());
    }

    switchView = (type) => {
        this.setState({ type: type });
    }

    _renderItem = ({ item }) => {
        return (
            <Image source={{ uri: item.banner_image }} style={styles.imageBackground} />
        );
    }

    render() {

        const { isLoading, items } = this.state;
        if (isLoading || items.length === 0) {
            return <Loading />
        }
        let main_type;
        if (this.state.type === 'map') {
            main_type = <View>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    ref={c => this.mapView = c}
                    style={styles.mapStyle}
                    region={{
                        latitude: 40.404917,
                        longitude: 49.838502,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421
                    }}
                >
                    <MapView.Marker
                        coordinate={{
                            latitude: parseFloat(this.props.ltd),
                            longitude: parseFloat(this.props.lng)
                        }}
                    >
                        <Image source={require('../assets/location.png')} />
                        <Callout style={styles.calloutStyle}>
                            <Card>
                                <CardItem cardBody>
                                    <ImageBackground source={{ uri: items.banner_image }}
                                        style={styles.imageStyle}
                                        resizeMode='cover'></ImageBackground>
                                </CardItem>
                                <CardItem>
                                    {items.blocks.filter(i => i.anchor === 'overview').map(i =>
                                        <Text>{i.title}</Text>
                                    )}
                                </CardItem>
                            </Card>
                        </Callout>
                    </MapView.Marker>
                </MapView>
            </View>
        } else {
            main_type = <View style={styles.carouselViewStyle}><Carousel
                ref={(c) => { this._carousel = c; }}
                onPress={() => { this._carousel.snapToNext(); }}
                onSnapToItem={(index) => this.setState({ activeSlide: index })}
                data={[{ banner_image: items.banner_image }]}
                renderItem={this._renderItem}
                sliderWidth={410}
                itemWidth={310}
            /></View>
        }
        return (
            <Container>
                <AppHeader title={this.props.title} type={'detail'} />
                {main_type}
                <View style={styles.scrollMenuStyle}>
                    <View style={{ flex: 1 }}>
                        <Button small transparent onPress={() => this.switchView('carousel')}>
                            <Text style={styles.menuTextStyle}>About</Text>
                        </Button>
                    </View>
                    <View style={{ flex: 1 }}>
                        <Button small transparent onPress={() => this.switchView('carousel')}>
                            <Text style={styles.menuTextStyle}>Offer</Text>
                        </Button>
                    </View>
                    <View style={{ flex: 1 }}>
                        <Button small transparent onPress={() => this.switchView('carousel')}>
                            <Text style={styles.menuTextStyle}>Contact</Text>
                        </Button>
                    </View>
                    {(isNaN(parseFloat(this.props.ltd))) ? (<View></View>) : (<View style={{ flex: 1 }}>
                        <Button small transparent onPress={() => this.switchView('map')}>
                            <Text style={styles.menuTextStyle}>Map</Text>
                        </Button>
                    </View>)}
                </View>
                <Content ref={(ref) => {
                    this.ListView_Ref = ref;
                }} style={styles.infoCardStyle}>
                    <ScrollView>
                        <View>
                            <H3 style={styles.titleStyle}>{items.title}</H3>
                            {items.blocks.filter(i => i.anchor === 'overview').map(i =>
                                i.blocks.map(i1 =>
                                    <View>
                                        <View style={styles.textStyle}>
                                            <HTML html={i1.body} />
                                        </View>
                                    </View>
                                )
                            )}
                        </View>
                        <View style={styles.line} />
                        <View style={styles.textStyle}>
                            {items.blocks.filter(i => i.anchor === 'what-you-get').map(i =>
                                i.blocks.map(i1 =>
                                    <HTML html={i1.body} />
                                )
                            )}
                        </View>
                        <View style={styles.line} />
                        <View style={styles.textStyle}>
                            {items.blocks.filter(i => i.anchor === 'hours').map(i =>
                                i.blocks.map(i1 =>
                                    <HTML html={i1.body} />
                                )
                            )}
                        </View>
                        {(typeof items.enquire_now !== "undefined") ?
                            (<Button onPress={() => { Linking.openURL(items.enquire_now) }} style={styles.btnStyle} small><Text> Enquire now </Text></Button>) :
                            (<View></View>)}
                    </ScrollView>
                </Content>
            </Container>
        );
    }

}

const styles = StyleSheet.create({
    viewStyle: {
        paddingTop: 20,
        paddingBottom: 20,
        borderRadius: 15
    },
    carouselViewStyle: {
        height: hp('30%'),
        backgroundColor: '#F5F7F6',
        alignItems: 'center',
        justifyContent: 'center'
    },
    infoCardStyle: {
        marginTop: 10,
        shadowOpacity: 0
    },
    scrollMenuStyle: {
        flexDirection: 'row',
        backgroundColor: '#fff',
        paddingLeft: 5,
        paddingRight: 20,
        paddingTop: 20,
        paddingBottom: 10,
        marginLeft: 20
    },
    menuTextStyle: {
        flex: 1,
        color: '#333',
        fontSize: RF(1.5)
    },
    titleStyle: {
        fontWeight: 'bold',
        paddingLeft: 20,
        paddingRight: 20,
        paddingBottom: 20,
        paddingTop: 10
    },
    textStyle: {
        paddingLeft: 20,
        paddingRight: 20,
        paddingBottom: 20
    },
    cardStyle: {
        borderRadius: 15
    },
    btnStyle: {
        backgroundColor: 'red',
        marginLeft: 20,
        marginBottom: 20
    },
    imageBackground: {
        height: hp('50%'),
        width: null,
        margin: 20,
        flex: 1,
        borderRadius: 15
    },
    line: {
        borderBottomColor: 'black',
        borderBottomWidth: 1,
        marginLeft: 20,
        marginRight: 20
    },
    mapStyle: {
        width: Dimensions.get('window').width,
        height: 248
    },
    calloutStyle: {
        position: 'absolute',
        minWidth: 200,
        minHeight: 60
    },
    imageStyle: {
        height: 120,
        width: null
    },
    sectionViewStyle: {
        paddingLeft: 10,
        paddingRight: 10
    }
});