/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */ 
import React, { Component } from 'react';
import { Container, Content, Grid, Row, Col, Item, Text, Thumbnail, CardItem, H2, Left, Body, Right, Button, View, Icon, H1, H3, Tab, Tabs, TabHeading, Header, Form } from 'native-base';
import GridLayout from '../gridLaout/gridLaout';
import styles from './profileStyles';
import InstaContainer from '../cards/instaContainer';
import { NavigationStackScreenProps, withNavigation } from 'react-navigation';
import { Drawer } from 'native-base';
import InstaSideBar from '../sidebar';

interface ProfileProps extends NavigationStackScreenProps {
}
interface ProfileState {
    selected: string
}
class ProfileTabs extends React.Component<ProfileProps, ProfileState> {
    drawer: any;
    constructor(props: ProfileProps) {
        super(props);
        this.state = {
            selected: 'IN'

        };
    }
    onValueChange = (value: string) => {
        this.setState({
            selected: value
        });
    }
    goToeditProfile = () => {
        this.props.navigation.navigate('EditProfile');
    }
    openRightDrawer = () => {
        this.drawer._root.open();
    }
    closeDrawer = () => {
        this.drawer._root.close()
    }

    render() {
        const proImg = require('../../../../assets/star/chat4.jpg');
        const add = 'add';
        const name = 'shadman';
        const edit = 'Edit Profile';
        return (
            <Drawer ref={(ref) => { this.drawer = ref; }} content={<InstaSideBar  {...this.props} />} onClose={() => this.closeDrawer()} side={'right'} type={'displace'}>
                <Container>
                    <Header style={styles.headerLogin}>
                        <Body>
                            <Button transparent style={styles.butonContent}>
                                <Text uppercase={false} numberOfLines={1}
                                    style={styles.textButton}>enappd.com <Icon name={'ios-arrow-down'} style={styles.iconArrow} />
                                </Text>
                            </Button>
                        </Body>
                        <Right>
                            <Button transparent onPress={this.openRightDrawer}>
                                <Icon name='menu' />
                            </Button>
                        </Right>
                    </Header>
                    <Grid>
                        <Row size={1}>
                            <Col size={1.2} style={styles.centerItem}>
                                <CardItem>
                                    <Thumbnail
                                        circular
                                        large
                                        source={proImg}
                                        style={styles.imageBorder} />
                                    <View style={styles.addView} >
                                        <Icon style={styles.addViewIcon} name={add} />
                                    </View>
                                </CardItem>
                                <Text style={styles.bold}>{name}</Text>
                            </Col>
                            <Col size={2.8} style={styles.spaceEven}>
                                <Item style={styles.noBorder}>
                                    <Left style={styles.centerItem}>
                                        <H3>115</H3>
                                        <Text note>Posts</Text>
                                    </Left>
                                    <Body>
                                        <H3>1525</H3>
                                        <Text note>Followers</Text>
                                    </Body>
                                    <Right style={styles.centerItem}>
                                        <H3>320</H3>
                                        <Text note>Following</Text>
                                    </Right>
                                </Item>
                                <Button bordered style={styles.editProfile} onPress={this.goToeditProfile}><Text uppercase={false}>{edit}</Text></Button>
                            </Col>
                        </Row>
                        <Row size={3}>
                            <Tabs tabBarPosition={'top'} locked={true}>
                                <Tab heading={<TabHeading><Icon name="grid" /></TabHeading>}>
                                    <GridLayout />
                                </Tab>
                                <Tab heading={<TabHeading><Icon name="menu" /></TabHeading>}>
                                    <Content>
                                        <InstaContainer />
                                    </Content>
                                </Tab>
                                <Tab heading={<TabHeading><Icon name="contact" /></TabHeading>}>
                                    <GridLayout />
                                </Tab>
                            </Tabs>
                        </Row>
                    </Grid>
                </Container>
            </Drawer>



        );
    }
}

export default withNavigation(ProfileTabs);