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

import {
    Box,
    Button,
    CloseIcon,
    ScrollView,
    VStack
} from "native-base"
import { useDispatch, useSelector } from "react-redux"
import { 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"

interface SearchFormProps {
    isFilterOpen: boolean,
}


const SearchForm = (props: SearchFormProps) => {
    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 [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 = () => {
        dispatch(search({
            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
        }))
    }

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

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

    return (
        <>
            { props.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