import React, { useContext, useState, Component, Fragment } from "react";
import { StyleSheet, Text, View, PixelRatio, Picker } from "react-native";

import { MaterialIcons } from "@expo/vector-icons";
import { FontAwesome5 } from '@expo/vector-icons';
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import Screen from "./Screen";
import SearchableDropdown from 'react-native-searchable-dropdown';

const items = [
    {
        id: 1,
        name: 'JavaScript',
    },
    {
        id: 2,
        name: 'Java',
    },
    {
        id: 3,
        name: 'Ruby',
    },
    {
        id: 4,
        name: 'React Native',
    },
    {
        id: 5,
        name: 'PHP',
    },
    {
        id: 6,
        name: 'Python',
    },
];

function SchoolPicker() {
    const [selectedItems, setSelectedItems] = useState(null);
    console.log(selectedItems);


    return (
            <View style={{ flex: 1, width: "100%" }}>
                <View style={styles.location}>
                    <View style={styles.mapIcon}>
                        <FontAwesome5
                            name="university"
                            size={28}
                            color="white"
                            alignItems="center"
                            alignContent="center"
                        />
                    </View>
                    <View style={styles.adressText}>
                        <Fragment>
                            <SearchableDropdown
                                multi={false}
                                selectedItems={selectedItems}
                                onItemSelect={(item) => {
                                    setSelectedItems(item)
                                }}
                                containerStyle={{ padding: 5 }}
                                itemStyle={{
                                    padding: 10,
                                    marginTop: 2,
                                    backgroundColor: '#ddd',
                                    borderColor: '#bbb',
                                    borderWidth: 1,
                                    borderRadius: 5,
                                }} itemTextStyle={{ color: '#222' }}
                                items={items}
                                chip={true}
                                resetValue={false}
                                textInputProps={
                                    {
                                        placeholder: "Escola onde você estuda...",
                                        underlineColorAndroid: "transparent",
                                        style: {
                                            padding: 12,
                                            borderWidth: 1,
                                            borderColor: '#ccc',
                                            borderRadius: 5,
                                        },
                                        onTextChange: text => console.log(text)
                                    }
                                }
                                listProps={
                                    {
                                        nestedScrollEnabled: false,
                                    
                                    }
                                }
                            />
                        </Fragment>

                    </View>
                </View>
            </View>
    );
}

const styles = StyleSheet.create({
    location: {
        //flex: 1,
        width: "100%",
        flexDirection: "row",
        alignItems: "flex-start",
        justifyContent: "space-between",
        // backgroundColor: colors.secondary,
    },
    adressText: {
        flex: 0.90,
        paddingLeft: 5,
    },
    mapIcon: {
        backgroundColor: colors.primary,
        padding: 8,
        width: 20,
        alignItems: "center",
        borderRadius: 5,
        flex: 0.10,
    },
});

export default SchoolPicker;