/**
 * 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, Text, Header, Item, Icon, Input, Button, Left, List, ListItem, Right, Body } from 'native-base';
import styles from './searchStyles';
import data from '../../../Database/grocery/data';

interface SearchViewProps {
    goBack: () => void;
}

const SearchView = (props: SearchViewProps) => {
    const { goBack } = props

    const name = 'arrow-left'
    const type = 'FontAwesome'

    return (
        <Container>
            <Header searchBar rounded style={styles.headerLogin}>
                <Left style={styles.leftwidth}>
                    <Button transparent onPress={goBack} >
                        <Icon name={name} type={type} style={styles.back} />
                    </Button>
                </Left>
                <Item>
                    <Icon name="ios-search" />
                    <Input placeholder="Search" />
                </Item>
            </Header>

            <Content>
                <List>
                    <ListItem itemHeader first>
                        <Left>
                            <Button bordered danger>
                                <Text>Recent Search</Text>
                            </Button>
                        </Left>
                        <Right>
                            <Button style={styles.buttonTextCenter} bordered danger>
                                <Text>Clear History</Text>
                            </Button>
                        </Right>
                    </ListItem>
                    {data.search.map((items, index) => {
                        return (
                            <ListItem thumbnail key={index}>
                                <Left>
                                    <Icon name={items.iconName} type='Ionicons' />
                                </Left>
                                <Body>
                                    <Text>{items.text} <Text style={styles.textRed}>{items.texted}</Text></Text>
                                </Body>
                            </ListItem>
                        )
                    })
                    }
                </List>
            </Content>
        </Container>
    )
}
export default SearchView;
