/**
 * 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 from 'react';
import {
    Container,
    Content,
    ListItem,
    Left,
    Thumbnail,
    Body,
    Right,
    Text,
    List,
    Tabs,
    Tab,
    TabHeading,
    Header,
    StyleProvider
} from 'native-base';
import Headercontent from '../../../components/grocery/header';
import ModalComponent from '../../../components/grocery/modal';
import styles from './MyAccountStyles';
import getTheme from '../../../../native-base-theme/components';
import material from '../../../../native-base-theme/variables/material';

interface MyAccountViewProps {
    toggleDrawer: () => void;
    goToMyCart: () => void;
    modalVisible: boolean;
    setModalInVisible: () => void;
    profile: () => any;
    myCards: () => any;
    myAddress: () => any;
    gotoSelectRadio: (index:number) => void;
    selectedIndex: any;
}

const MyAccountView = (props: MyAccountViewProps) => {
    const {
        toggleDrawer,
        goToMyCart,
        modalVisible,
        setModalInVisible,
        selectedIndex
    } = props
    const addressLocation = 'My Account';
    const proPic = require('../../../assets/grocery/user.jpeg');
    const themeColor = '#f53d3d';
    const rightIcon = 'shopping-cart'
    const name = 'bars';
    const type = 'FontAwesome';
    const nameUser = 'John Snow';
    const mobUser = '987-123-0000';
    return (
        <Container>
            <Headercontent
                name={name}
                onPress={toggleDrawer}
                loginTitle={addressLocation}
                type={type}
                rightIcon={rightIcon}
                rightType={'FontAwesome'}
                onPressToCart={goToMyCart}
                stylesRight={styles.rightIcon}
                hasHeader
            />
            <Header hasTabs style={styles.headerContenList}>
                <Left style={styles.leftStyle}>
                    <Thumbnail source={proPic} />
                </Left>
                <Body style={styles.bodyStyle}>
                    <Text style={styles.colorWhit}>{nameUser}</Text>
                    <Text style={styles.colorWhit}>{mobUser}</Text>
                </Body>
                <Right style={styles.righcontent}>
                    <Text style={styles.colorWhit}>Edit Profile</Text>
                </Right>
            </Header>
            <StyleProvider style={getTheme(material)}>
                <Tabs tabBarPosition="top"
                    tabBarUnderlineStyle={{ backgroundColor: '#fff' }}
                    locked={false}
                    tabBarBackgroundColor='red'
                 >
                    <Tab heading={<TabHeading><Text uppercase>PROFILE</Text></TabHeading>}>
                        {props.profile()}
                    </Tab>

                    <Tab heading={<TabHeading><Text uppercase>MY CARD</Text></TabHeading>}>
                        <Content>
                            {props.myCards()}
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading><Text uppercase>MY ADDRESS</Text></TabHeading>}>
                        {props.myAddress()}
                    </Tab>
                </Tabs>
            </StyleProvider>


            <ModalComponent
                modalVisible={modalVisible}
                setModalInVisible={setModalInVisible}
                gotoSelectRadio={(i) => props.gotoSelectRadio(i)}
                selectedIndex={selectedIndex}
            />
        </Container>

    )
}
export default MyAccountView;
