Untitled

import React, { Component } from 'react';
import { View, Image, StyleSheet, ImageBackground, Dimensions, ScrollView, Linking, TouchableWithoutFeedback } from 'react-native';
import { H3, Text, Card, CardItem, Button, Container, Content, Toast } from 'native-base';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import HTML from 'react-native-render-html';
import axios from 'axios';
import MapView 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: [],
            content: null,
            tab_id: null
        }
        this.reRenderSomething = this.props.nav.addListener('willFocus', () => {
            this.componentDidMount();
        });
    }

    componentDidMount() {
        this.getItems(this.props.url);
        console.log(this.state.items.tabs);
        // this.state.items.tabs.filter(i => i.anchor === '#overview').map(i => {
        //   this.setState({tab_id: i.id})
        // });
    }

    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, tab_id: type });
    }

    changeContent = (anchor, id) => {
        this.state.items.blocks.filter(i => "#" + i.anchor === anchor).map(i =>
            i.blocks.map(i1 => {
                (i.anchor === 'overview') ? (this.setState({
                    content: <View><H3 style={styles.titleStyle}>{this.state.items.title.replace(/&amp;/g, '&')}</H3>
                        <View style={styles.textStyle}>
                            <HTML html={i1.body} />
                        </View></View>, type: 'carousel', tab_id: id
                })) : (
                  (i.anchor === 'getting-here') ? (
                  this.setState({
                    content: <View style={styles.textStyle}>
                        <HTML html={i1.body} />
                    </View>, type: 'map', tab_id: id
                  })
                ) : (
                  this.setState({
                    content: <View style={styles.textStyle}>
                        <HTML html={i1.body} />
                    </View>, type: 'carousel', tab_id: id
                  })
                )
              )
            }
            )
        )
    }

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

    get pagination() {
        const { items, activeSlide } = this.state;
        return (
            <Pagination
                dotsLength={items.banner_images.length}
                activeDotIndex={activeSlide}
                dotStyle={{
                    width: 10,
                    height: 10,
                    padding: 1,
                    borderRadius: 5,
                    marginHorizontal: 8,
                    backgroundColor: 'red'
                }}
                inactiveDotStyle={{
                    // Define styles for inactive dots here
                }}
                inactiveDotOpacity={0.4}
                inactiveDotScale={0.6}
            />
        );
    }

    render() {

        const { isLoading, items, content, tab_id } = this.state;
        if (isLoading || items.length === 0) {
            return <Loading />
        }
        let main_type;
        if (this.state.type === 'map') {
            main_type = <View>
                <MapView
                    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>
                                    <Text>{items.title}</Text>
                                </CardItem>
                            </Card>
                        </Callout>
                    </MapView.Marker>
                </MapView>
            </View>;
        } else {
            if (typeof items.banner_images === "undefined" || items.banner_images.length === 0) {
                main_type = <View style={{ flex: 1 }}>
                    <Image resizeMode='cover' style={styles.itemImage} source={{ uri: items.banner_image }} />
                </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={items.banner_images}
                    renderItem={this._renderItem}
                    sliderWidth={410}
                    itemWidth={310}
                />
                    {this.pagination}
                </View>;
            }
        }
        return (
            <Container>
                <AppHeader title={this.props.title} type={'detail'} />
                {main_type}
                {(typeof items.tabs !== "undefined") ?
                    (<ScrollView style={styles.scrollViewStyle} horizontal={true} showsHorizontalScrollIndicator={false}>
                        <View style={styles.listTypeViewStyle}>
                            {(typeof items.tabs === "undefined") ? (<View></View>) :
                                (items.tabs.map(i =>
                                    <TouchableWithoutFeedback style={{ height: 10 }} onPress={() => this.changeContent(i.anchor, i.id)}>
                                        {(tab_id === i.id) ?
                                            (
                                                <View style={[styles.listItemStyle, { backgroundColor: '#FF0014', borderColor: '#FF0014' }]}>
                                                    <Text style={[styles.tabTextStyle, { color: '#fff' }]}>{i.title}</Text>
                                                </View>
                                            ) :
                                            (
                                                <View style={styles.listItemStyle}>
                                                    <Text style={styles.tabTextStyle}>{i.title}</Text>
                                                </View>
                                            )}
                                    </TouchableWithoutFeedback>
                                ))
                            }
                        </View>
                    </ScrollView>) : (<View></View>)
                }
                <Content style={styles.infoCardStyle}>
                    {(content !== null) ? (content) :
                        (items.blocks.filter(i => i.anchor === 'overview' || i.anchor === 'free-entry').map(i =>
                            i.blocks.map(i1 =>
                                <View><H3 style={styles.titleStyle}>{items.title.replace(/&amp;/g, '&')}</H3>
                                    <View style={styles.textStyle}>
                                        <HTML html={i1.body} />
                                    </View></View>
                            )
                        ))}
                    {(typeof items.enquire_now !== "undefined") ?
                        (<Button onPress={() => { Linking.openURL(items.enquire_now) }} style={styles.btnStyle} small><Text> Enquire now </Text></Button>) :
                        (<View></View>)}
                </Content>
            </Container>
        );
    }

}

const styles = StyleSheet.create({
    viewStyle: {
        paddingTop: 20,
        paddingBottom: 20,
        borderRadius: 15
    },
    carouselViewStyle: {
        flex: 1,
        backgroundColor: '#F5F7F6',
        alignItems: 'center',
        justifyContent: 'center'
    },
    scrollViewStyle: {
        flexGrow: 0.07,
        borderBottomWidth: 1,
        borderBottomColor: '#c4c5c4'
    },
    listTypeViewStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        elevation: 3,
        paddingLeft: 20,
        paddingRight: 20
    },
    listItemStyle: {
        borderWidth: 1,
        backgroundColor: '#F5F7F6',
        borderColor: '#c4c5c4',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 10,
        borderRadius: 30
    },
    tabTextStyle: {
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        fontSize: RF('1.6'),
        color: '#333'
    },
    infoCardStyle: {
        flex: 1,
        shadowOpacity: 0
    },
    scrollMenuStyle: {
        backgroundColor: '#fff',
        paddingLeft: 5,
        paddingRight: 20,
        paddingTop: 20,
        paddingBottom: 10,
        marginLeft: 20,
        height: hp('2%')
    },
    menuTextStyle: {
        flex: 1,
        color: '#333',
        fontSize: hp("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('55%'),
        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
    },
    itemImage: {
        flex: 1,
        width: Dimensions.get('window').width,
        height: hp('50%')
    },
    sectionViewStyle: {
        paddingLeft: 10,
        paddingRight: 10
    }
});