aswi2023one-team-to-rule-them-all-gitlab/src/components/search/SearchForm.tsx @ d3c12593

import {
    Box,
    Button,
    ChevronDownIcon,
    ChevronUpIcon,
    CloseIcon,
    HStack,
    Input,
    Text,
    VStack
} from "native-base"
import { useDispatch, useSelector } from "react-redux"
import { useCallback, useEffect, useState } from "react"
import { AppDispatch, RootState } from "../../stores/store"
import { Inventory } from "../../types/searchFormTypes"
import { search } from "../../stores/actions/listViewThunks"
import MultiSelect from "./MultiSelect"
import SwitchWithLabel from "./SwitchWithLabel"
import { log } from "../../logging/logger"
import { setFilterState } from "../../stores/reducers/listViewSlice"
import { SearchParams } from "../../api/searchService"

interface SearchFormProps {
    inventoryId: string | null
}


const SearchForm = (props: SearchFormProps) => {
    const [isFilterOpen, setIsFilterOpen] = useState<boolean>(true)

    const inventories: Inventory[] = useSelector((state: RootState) => state.searchForm.inventories)
    const nationalities = useSelector((state: RootState) => state.searchForm.nationalities)
    const artists = useSelector((state: RootState) => state.searchForm.artists)
    const subjects = useSelector((state: RootState) => state.searchForm.subjects)
    const rooms = useSelector((state: RootState) => state.searchForm.rooms)
    const techniques = useSelector((state: RootState) => state.searchForm.techniques)
    const countries = useSelector((state: RootState) => state.searchForm.countries)
    const cities = useSelector((state: RootState) => state.searchForm.cities)
    const institutions = useSelector((state: RootState) => state.searchForm.institutions)

    const [selectedInventories, setSelectedInventories] = useState<{ label: string, value: string }[]>([])
    const [selectedNationalities, setSelectedNationalities] = useState<{ label: string, value: string }[]>([])
    const [selectedArtists, setSelectedArtists] = useState<{ label: string, value: string }[]>([])
    const [selectedSubjects, setSelectedSubjects] = useState<{ label: string, value: string }[]>([])
    const [selectedRooms, setSelectedRooms] = useState<{ label: string, value: string }[]>([])
    const [selectedTechniques, setSelectedTechniques] = useState<{ label: string, value: string }[]>([])
    const [selectedCountries, setSelectedCountries] = useState<{ label: string, value: string }[]>([])
    const [selectedCities, setSelectedCities] = useState<{ label: string, value: string }[]>([])
    const [selectedInstitutions, setSelectedInstitutions] = useState<{ label: string, value: string }[]>([])
    const [searchQuery, setSearchQuery] = useState<string>("")

    const [isSchoolOfPrague, setIsSchoolOfPrague] = useState(false)
    const [isOriginal, setIsOriginal] = useState(false)
    const [isCopy, setIsCopy] = useState(false)
    const [isHighQuality, setIsHighQuality] = useState(false)
    const [isLowQuality, setIsLowQuality] = useState(false)

    const dispatch = useDispatch<AppDispatch>()

    const searchSubmit = () => {
        const filterState: SearchParams = {
            inventories: selectedInventories.map(i => i.value),
            nationalities: selectedNationalities.map(n => n.value),
            artists: selectedArtists.map(a => a.value),
            subjects: selectedSubjects.map(s => s.value),
            rooms: selectedRooms.map(r => r.value),
            techniques: selectedTechniques.map(t => t.value),
            countries: selectedCountries.map(c => c.value),
            cities: selectedCities.map(c => c.value),
            institutions: selectedInstitutions.map(i => i.value),
            isSchoolOfPrague,
            isOriginal,
            isCopy,
            isHighQuality,
            isLowQuality,
            searchQuery: searchQuery,
        }
        dispatch(setFilterState(filterState))
        dispatch(search(filterState))
        setIsFilterOpen(false)
    }

    const clearForm = () => {
        log.debug("SearchForm", "clearForm")

        setSelectedInventories([])
        setSelectedNationalities([])
        setSelectedArtists([])
        setSelectedSubjects([])
        setSelectedRooms([])
        setSelectedTechniques([])
        setSelectedCountries([])
        setSelectedCities([])
        setSelectedInstitutions([])
        setSearchQuery("")
    }

    const getSearchHeader = useCallback(() => {
        if (selectedInventories && selectedInventories.length === 1) {
            return `Search: ${ selectedInventories[0].label }`
        } else if (selectedRooms && selectedRooms.length === 1) {
            return `Search: ${ selectedRooms[0].label }`
        } else {
            return "Search:"
        }
    }, [inventories, rooms])

    useEffect(() => {
        log.debug("SearchForm", "useEffect", "props.inventoryId", props.inventoryId)
        if (props.inventoryId) {
            clearForm()
            setIsFilterOpen(false)
            setSelectedInventories([{ label: props.inventoryId, value: props.inventoryId }])
            dispatch(setFilterState({ inventories: [props.inventoryId] }))
            dispatch(search({ inventories: [props.inventoryId] }))
        }
    }, [props.inventoryId])

    return (
        <>
            <Text
                fontSize={ "2xl" }
                fontWeight={ "bold" }
                color={ "primary.500" }
            >
                { getSearchHeader() }
            </Text>
            <Input
                placeholder="Search"
                size={ "md" }
                variant="underlined"
                value={searchQuery}
                onChangeText={ setSearchQuery }
            />
            <HStack justifyContent={"space-between"}>
                <Button
                    onPress={ () => setIsFilterOpen(!isFilterOpen) }
                    variant="outline"
                    endIcon={
                        <>
                            { isFilterOpen ?
                                (<ChevronUpIcon size={ 4 } color={ "primary.500" }/>)
                                : (<ChevronDownIcon size={ 4 } color={ "primary.500" }/>) }
                        </>
                    }
                    flexWrap={ "nowrap" }
                    borderColor={ "primary.500" }
                    size={ "sm" }
                    mt={ 2 }
                    p={ 2 }

                >
                    Filter
                </Button>
                { !isFilterOpen && (
                    <Button
                        borderRadius={ 10 }
                        onPress={ () => searchSubmit() }
                        colorScheme="primary"
                        background={ "primary.500" }
                        variant="solid"
                        mt={2}
                        p={2}
                        size={ "md" }
                    >
                        Search
                    </Button>
                )}
            </HStack>
            { isFilterOpen && (
                <>
                    <MultiSelect
                        data={ inventories.map((inventory, index) => {
                            return {label: inventory.label, value: inventory.name, index}
                        }) }
                        label="Inventory (OR)"
                        selectedItems={ selectedInventories }
                        onSelectedItemsChange={ setSelectedInventories }
                    />
                    <MultiSelect
                        data={ rooms.map((room, index) => {
                            return {label: `${ room.id } - ${ room.label }`, value: room.id.toString(), index}
                        }) }
                        label="Rooms (OR)"
                        selectedItems={ selectedRooms }
                        onSelectedItemsChange={ setSelectedRooms }
                    />
                    <MultiSelect
                        data={ artists.map((art, index) => {
                            return {label: art.display_name, value: art.getty_id, index}
                        }) }
                        label="Artists/Copyists (OR)"
                        selectedItems={ selectedArtists }
                        onSelectedItemsChange={ setSelectedArtists }
                    />
                    <MultiSelect
                        data={ nationalities.map((nat, index) => {
                            return {label: nat, value: nat, index}
                        }) }
                        label="Artist`s Origin (OR)"
                        selectedItems={ selectedNationalities }
                        onSelectedItemsChange={ setSelectedNationalities }
                    />
                    <MultiSelect
                        data={ subjects.map((subj, index) => {
                            return {label: subj, value: subj, index}
                        }) }
                        label="Subject (AND)"
                        selectedItems={ selectedSubjects }
                        onSelectedItemsChange={ setSelectedSubjects }
                    />
                    <MultiSelect
                        data={ techniques.map((tech, index) => {
                            return {label: tech, value: tech, index}
                        }) }
                        label="Technique (OR)"
                        selectedItems={ selectedTechniques }
                        onSelectedItemsChange={ setSelectedTechniques }
                    />
                    <MultiSelect
                        data={ institutions.map((institution, index) => {
                            return {label: institution, value: institution, index}
                        }) }
                        label="Institution (OR)"
                        selectedItems={ selectedInstitutions }
                        onSelectedItemsChange={ setSelectedInstitutions }
                    />
                    <MultiSelect
                        data={ cities.map((city, index) => {
                            return {label: city, value: city, index}
                        }) }
                        label="City (OR)"
                        selectedItems={ selectedCities }
                        onSelectedItemsChange={ setSelectedCities }
                    />
                    <MultiSelect
                        data={ countries.map((country, index) => {
                            return {label: country, value: country, index}
                        }) }
                        label="Country (OR)"
                        selectedItems={ selectedCountries }
                        onSelectedItemsChange={ setSelectedCountries }
                    />
                    <VStack space={ 2 } mt={ 1 }>
                        <SwitchWithLabel label={ "School of Prague" } value={ isSchoolOfPrague }
                                         onValueChange={ setIsSchoolOfPrague }/>
                        <SwitchWithLabel label={ "Original" } value={ isOriginal } onValueChange={ setIsOriginal }/>
                        <SwitchWithLabel label={ "Copy" } value={ isCopy } onValueChange={ setIsCopy }/>
                        <SwitchWithLabel label={ "High Quality" } value={ isHighQuality }
                                         onValueChange={ setIsHighQuality }/>
                        <SwitchWithLabel label={ "Low Quality" } value={ isLowQuality }
                                         onValueChange={ setIsLowQuality }/>
                    </VStack>
                    <Box
                        flex={ 1 }
                        flexDirection="row"
                        justifyContent={ "flex-end" }
                        pt={ 2 }
                    >
                        <Button
                            borderRadius={ 10 }
                            startIcon={
                                <CloseIcon size="xs"/>
                            }
                            onPress={ clearForm }
                            variant="outline"
                            color="primary.500"
                            borderColor="primary.500"
                            mr={ 2 }
                            size={ "sm" }
                        >
                            Reset
                        </Button>
                        <Button
                            borderRadius={ 10 }
                            onPress={ () => searchSubmit() }
                            colorScheme="primary"
                            background={ "primary.500" }
                            variant="solid"
                            size={ "sm" }
                        >
                            Search
                        </Button>
                    </Box>
                </>
            ) }

        </>
    )
}

export default SearchForm