import React from 'react'
import styled from 'styled-components'
import { Text, TouchableOpacity, View } from 'react-native'

const WrapperDropdown = styled(View)`
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index:2;

    overflow-x: hidden;
    overflow-y: auto;

    background-color: ${({ theme }) => theme.colors.dp01 + 'cc'};
    width: 200px;
    max-height: 100px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
`
const DropdownItem = styled(TouchableOpacity)`
    color: ${({ theme }) => theme.colors.textW2};
    font-size: 20px;
`
const HorizontalSeperator = styled(View)`
    width: 100%;
    height: 1px;
    background-color: ${({ theme }) => theme.colors.dp02};
`

const Dropdown = (props) => {
    let text = props.text
    text = text.replace(/\W/g, '')
    let regex = new RegExp(text, "i");

    let newArray = props.array.filter((element) =>
        regex.test(element)
    )
    if (newArray.length === 1 && newArray[0] === text) {
        newArray = [];
    }
    let dropdownList = newArray.map((element, index) => {
        return (
            <View key={index}>
                <DropdownItem onPress={() => props.setElement(element)}>{element}</DropdownItem>
                <HorizontalSeperator />
            </View>
        )
    })
    return (
        <WrapperDropdown>
            {dropdownList}
        </WrapperDropdown>
    )
}
 
export const QtDropdown = (props) => {
    const quantities = ["g", "kg", "mL", "L"]
    return <Dropdown 
                array={quantities} 
                text={props.text} 
                setElement={props.setElement} />
}


export default Dropdown