import React from 'react'
import { 
    FlatList,
    StyleSheet, 
    Text,
    View
} from 'react-native'
import Theme from '../../../../components/theme.style.js';
import Empty from './Empty.js';
import ListItem from './ListItem.js';

const List = (props) => {

    const renderItem = (value, data) => {
        return <ListItem 
            init={props.init}
            value={value}
            data={data}
        />
    }

    const renderList = () => {
        return (
            <View style={styles.renderContainer}>
                <FlatList 
                    data={props.data}
                    renderItem={(item) => renderItem(item, props.data)}
                    contentContainerStyle={props.data?.length === 0 && { flex: 1 }}
                    ListEmptyComponent={Empty}
                />
            </View>
        )
    }

    return (
        <View style={styles.container}>
            { props.data?.length > 0 &&
                <View style={styles.savedLocationContainer}>
                    <Text style={styles.savedLocationText}>Saved Location</Text>
                </View> }

            {renderList()}
        </View>
    )
}

export default List

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginVertical: 15
    },
    renderContainer: {
        flex: 1, 
        marginTop: 10
    },
    savedLocationContainer: {
        width: '100%', 
        alignItems: 'flex-start',
        paddingHorizontal: 18
    },
    savedLocationText: {
        paddingVertical: 10,
        paddingHorizontal: 15,
        backgroundColor: Theme.colors.primary,
        fontSize: 15,
        color: Theme.colors.white
    }
})