aswi2023one-team-to-rule-them-all-gitlab/src/components/search/MultiSelect.tsx @ af8eb9a6

import {
    Actionsheet, Badge,
    Box, Button, CloseIcon, Divider, HStack,
    Icon,
    Input,
    KeyboardAvoidingView,
    Pressable,
    ScrollView, SearchIcon, Spinner,
    Text,
    useDisclose, View
} from "native-base"
import { FlatList, GestureResponderEvent, Platform } from "react-native"
import { useEffect, useMemo, useState } from "react"
import { Ionicons } from "@expo/vector-icons"
import { log } from "../../logging/logger"

interface MultiSelectProps {
    data: { label: string, value: string, index: number }[],
    label: string,
    selectedItems: { label: string, value: string }[],
    onSelectedItemsChange: (selectedItems: { label: string, value: string }[]) => void,
}

const MultiSelect = (props: MultiSelectProps) => {
    const [isSelected, setIsSelected] = useState(Array(props.data.length).fill(false))
    const [query, setQuery] = useState("")
    const {
        isOpen,
        onOpen,
        onClose,
    } = useDisclose()

    const filteredData = useMemo(() => {
        log.debug("Multiselect", "Filtering data")
        if (!query || query.trim() == "") {
            return props.data
        }
        log.debug("Multiselect", "Filtering data", "Query:", query)
        log.debug("Multiselect", "Filtering data", "Data:", props.data)
        return props.data.filter((row) => row.label?.toLowerCase().includes(query.toLowerCase()))
    }, [query, props.data])

    const updateSelected = (index: number) => {
        isSelected[index] = !isSelected[index]
        setIsSelected([...isSelected])
    }

    useEffect(() => {
        log.debug("Multiselect", "Updating selected items before render")

        const newSelected = Array(props.data.length).fill(false)
        props.selectedItems.forEach((item) => {
            const index = props.data.findIndex((i) => i.value === item.value)
            if (index !== -1) {
                newSelected[index] = true
            }
        })
        setIsSelected(newSelected)

        log.debug("Multiselect", "Updated selected items before render")
    }, [props.selectedItems])

    const onCancel = () => {
        onClose()
    }

    const onDone = () => {
        log.debug("Multiselect", "Done clicked")

        const selectedItems = props.data.filter((row, index) => isSelected[index]).map((row) => ({
            label: row.label,
            value: row.value
        }))
        props.onSelectedItemsChange(selectedItems)
        onClose()
    }

    const unselectItem = (index: number) => {
        log.debug("Multiselect", "Unselecting item")

        props.selectedItems.splice(index, 1)
        props.onSelectedItemsChange([...props.selectedItems])
    }

    return (
        <>
            <Pressable
                onPress={ onOpen }
                rounded="md"
                mt={ 2 }
            >
                <Text>{ props.label }</Text>
            </Pressable>

            <Box flex={ 1 }>
                <ScrollView horizontal pb={ 2 }>
                    <HStack space={ 1 } flexWrap="wrap">
                        { props.selectedItems.map((item, index) => (
                            <Badge
                                endIcon={
                                    <CloseIcon
                                        size={ 4 }
                                        onPress={ () => {
                                            unselectItem(index)
                                        } }
                                    />
                                }
                                rounded="md"
                                key={ item.value }
                                variant="solid"
                            >{ item.label }</Badge>
                        )) }
                    </HStack>
                </ScrollView>
            </Box>


            <Divider background={ "primary.500" }/>
            { isOpen && (
                <Actionsheet isOpen={ isOpen } onClose={ onClose }>
                    <Actionsheet.Content>
                        <KeyboardAvoidingView
                            h={ {lg: "auto"} }
                            behavior={ "padding" }
                            keyboardVerticalOffset={ 160 }
                        >
                            <Input
                                placeholder="Search"
                                variant="filled"
                                width="100%"
                                borderRadius="10"
                                py="1"
                                px="2"
                                value={ query }
                                onChangeText={ setQuery }
                                InputLeftElement={
                                    <SearchIcon
                                        ml="2"
                                        size="4"
                                        color="gray.400"
                                    />
                                }
                                InputRightElement={
                                    <CloseIcon
                                        mr="2"
                                        size="4"
                                        color="gray.400"
                                        onPress={ () => setQuery("") }
                                    />
                                }
                            />
                            <FlatList
                                data={ filteredData }
                                renderItem={ ({item}) => (
                                    <Actionsheet.Item
                                        _pressed={ {bg: "primary.100"} }
                                        onPress={ () => updateSelected(item.index) }
                                        key={ item.value }
                                        backgroundColor={ isSelected[item.index] ? "primary.100" : {} }
                                    >
                                        { item.label }
                                    </Actionsheet.Item>
                                ) }
                                keyExtractor={ item => item.value }
                                keyboardShouldPersistTaps={ "always" }
                            />
                            <HStack justifyContent={ "flex-end" } px={ 3 } space={ 2 }>
                                <Button
                                    onPress={ onCancel }
                                    colorScheme={ "error" }
                                    borderRadius={ 10 }
                                    variant={ "subtle" }
                                    startIcon={
                                        <Icon
                                            ml="0"
                                            size="4"
                                            color="error.400"
                                            as={ <Ionicons name="ios-close"/> }
                                        />
                                    }
                                >
                                    Cancel
                                </Button>
                                <Button
                                    onPress={ onDone }
                                    colorScheme={ "primary" }
                                    borderRadius={ 10 }
                                    variant={ "subtle" }
                                    startIcon={
                                        <Icon
                                            size="4"
                                            color="primary.700"
                                            as={ <Ionicons name="ios-checkmark"/> }
                                        />
                                    }
                                >
                                    Done
                                </Button>
                            </HStack>
                        </KeyboardAvoidingView>
                    </Actionsheet.Content>
                </Actionsheet>
            ) }

        </>
    )

}

export default MultiSelect