/**
 * 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 { TouchableOpacity } from 'react-native';
import {
    Container,
    Content,
    Text,
    Icon,
    View,
    Right,
    Radio,
    ListItem,
    Left,
    Button,
    Footer,
    FooterTab,
    Header,
    Body,
    StyleProvider,
    Tabs,
    Tab,
    TabHeading,
} from 'native-base';
import Headercontent from '../../../components/grocery/header';
import styles from './deliveryStyles';
import scheduleTime from '../../../Database/grocery/data';
import getTheme from '../../../../native-base-theme/components';
import material from '../../../../native-base-theme/variables/material';

interface DeliveryViewComponentProps {
    goBack: () => void;
    addressLocation: string;
    selectedIndex: number;
    goToCheckout: () => void;
    gotoSelectRadio: (index:number) => void;
    setSlectedTabs: () => void;
}


const DeliveryViewComponent = (props:DeliveryViewComponentProps) => {
    const { goBack, addressLocation, selectedIndex, goToCheckout } = props;
    const themeColor = '#f53d3d';
    const address = ' D-Block,Malvia Nagar '
    const addNew = ' Add a new address in '
    const payment = 'Proceed To Payment'
    const addCircle = 'ios-add-circle-outline'
    const ionicons = 'Ionicons'
    const arrowLeft = 'arrow-left'
    const One = () => {
        return (
            scheduleTime.timings.map((data, index) => {
                return (
                    <ListItem onPress={() => props.gotoSelectRadio(index)} key={index}>
                        <Left>
                            <Text>{data.time}</Text>
                        </Left>
                        <Right>
                            <Radio selectedColor={themeColor} selected={selectedIndex === index} />
                        </Right>
                    </ListItem>
                )
            })
        )
    };

    return (
        <Container>
            <Headercontent
                name={arrowLeft}
                onPress={goBack}
                loginTitle={addressLocation}
                type={'FontAwesome'}
            />
            <Header hasTabs style={styles.customHeader}>
                <Body>
                    <View style={styles.addressSelect}>
                        <TouchableOpacity
                            style={styles.button}
                        >
                            <View style={styles.flexDirectionRow}>
                                <Icon name={addCircle} type={ionicons} style={styles.iconSize} />
                                <Text style={styles.addressText}> {addNew}</Text>
                                <Text style={styles.addressText}> {address} </Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </Body>
            </Header>
            <StyleProvider style={getTheme(material)}>
                <Tabs tabBarPosition="top"
                    tabBarUnderlineStyle={{ backgroundColor: '#fff' }}
                    locked={false}
                    tabBarBackgroundColor='red'
                    onChangeTab={() => {
                        props.setSlectedTabs()
                    }}
                >
                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>MON</Text></TabHeading>}>
                        {One()}
                    </Tab>

                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>TUE</Text></TabHeading>}>
                        <Content>
                            {One()}
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>WED</Text></TabHeading>}>
                        {One()}
                    </Tab>
                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>THU</Text></TabHeading>}>
                        {One()}
                    </Tab>
                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>FRI</Text></TabHeading>}>
                        {One()}
                    </Tab>
                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>SAT</Text></TabHeading>}>
                        {One()}
                    </Tab>
                    <Tab heading={<TabHeading><Text uppercase style={styles.fontTab}>SUN</Text></TabHeading>}>
                        {One()}
                    </Tab>
                </Tabs>
            </StyleProvider>
            <Content padder>
            </Content>

            <Footer >
                <FooterTab style={styles.footerStyle}>
                    <Button full style={styles.buttonBuynow} onPress={goToCheckout}>
                        <Text style={styles.buttonCartText}>{payment}</Text>
                    </Button>
                </FooterTab>

            </Footer>
        </Container>
    )
}
export default DeliveryViewComponent;
