/**
 * 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,
 } from 'native-base';
import SegmentControl from 'react-native-segment-control';
import Headercontent from '../../../components/redux/header';
import styles from './deliveryStyles';
import scheduleTime from '../../../Database/data';

interface DeliveryViewProps {
    addressLocation:any;
    selectedIndex: number;
    goBack: () => void;
    goToCheckout: () => void;
    gotoSelectRadio: (index:number) => void; 
}

const DeliveryViewComponent = (props:DeliveryViewProps) => {
    const { goBack, addressLocation, selectedIndex, goToCheckout, gotoSelectRadio } = props
    const address = ' D-Block,Malvia Nagar,Jaipur '
    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 themeColor= '#f53d3d';
    const One = () => {
        return (
            scheduleTime.timings.map((data, index) => {
                return (
                    <ListItem onPress={() => gotoSelectRadio(index)} key={index}>
                        <Left>
                            <Text>{data.time}</Text>
                        </Left>
                        <Right>
                            <Radio selectedColor={themeColor} selected={selectedIndex === index} />
                        </Right>
                    </ListItem>
                )
            })
        )
    };
    const segments = [
        {
            title: 'Sun',
            view: One
        },
        {
            title: 'Mon',
            view: One
        },
        {
            title: 'Tue',
            view: One
        },
        {
            title: 'Wed',
            view: One
        },
        {
            title: 'Thu',
            view: One
        },
        {
            title: 'Fri',
            view: One
        },
        {
            title: 'Sat',
            view: One
        }
    ];
    return (
        <Container>
            <Headercontent
                name={arrowLeft}
                onPress={goBack}
                loginTitle={addressLocation}
                type={'FontAwesome'}
            />
            <Content padder>
                <View style={styles.addressSelect}>
                    <TouchableOpacity
                        style={styles.button}
                        // onPress={this.onPress}
                    >
                        <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>

                <View style={styles.segmentsContainer}>
                    <SegmentControl
                        segments={segments}
                        color={themeColor}

                    />
                </View>
            </Content>
            {/* <Footer padder>
                <FooterTab style={styles.footerContent}>
                    <Button style={styles.buttonBuynow} >
                        <Text style={styles.buttonCartText}>{payment}</Text>
                    </Button>
                </FooterTab>
            </Footer> */}
            <Footer style={styles.footerStyle}>
                <Button danger style={styles.buttonBuynow} onPress={goToCheckout} disabled={selectedIndex < 0}>
                    <Text style={styles.buttonCartText}>{payment}</Text>
                </Button>
            </Footer>
        </Container>
    )
}
export default DeliveryViewComponent;
