hensei-web/components/WeaponSearchFilterBar/index.tsx

import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'

import cloneDeep from 'lodash.clonedeep'

import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

import SearchFilter from '~components/SearchFilter'
import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'

import './index.scss'
import { emptyElementState, emptyProficiencyState, emptyRarityState, emptyWeaponSeriesState } from '~utils/emptyStates'
import { elements, proficiencies, rarities, weaponSeries } from '~utils/stateValues'

interface Props {
    sendFilters: (filters: { [key: string]: number[] }) => void
}

const WeaponSearchFilterBar = (props: Props) => {
    const { t } = useTranslation('common')

    const [rarityMenu, setRarityMenu] = useState(false)
    const [elementMenu, setElementMenu] = useState(false)
    const [proficiencyMenu, setProficiencyMenu] = useState(false)
    const [seriesMenu, setSeriesMenu] = useState(false)

    const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
    const [elementState, setElementState] = useState<ElementState>(emptyElementState)
    const [proficiencyState, setProficiencyState] = useState<ProficiencyState>(emptyProficiencyState)
    const [seriesState, setSeriesState] = useState<WeaponSeriesState>(emptyWeaponSeriesState)

    function rarityMenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(true)
            setElementMenu(false)
            setProficiencyMenu(false)
            setSeriesMenu(false)
        } else setRarityMenu(false)
    }

    function elementMenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(false)
            setElementMenu(true)
            setProficiencyMenu(false)
            setSeriesMenu(false)
        } else setElementMenu(false)
    }

    function proficiencyMenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(false)
            setElementMenu(false)
            setProficiencyMenu(true)
            setSeriesMenu(false)
        } else setProficiencyMenu(false)
    }

    function seriesMenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(false)
            setElementMenu(false)
            setProficiencyMenu(false)
            setSeriesMenu(true)
        } else setSeriesMenu(false)
    }

    function handleRarityChange(checked: boolean, key: string) {
        let newRarityState = cloneDeep(rarityState)
        newRarityState[key].checked = checked
        setRarityState(newRarityState)
    }

    function handleElementChange(checked: boolean, key: string) {
        let newElementState = cloneDeep(elementState)
        newElementState[key].checked = checked
        setElementState(newElementState)
    }

    function handleProficiencyChange(checked: boolean, key: string) {
        let newProficiencyState = cloneDeep(proficiencyState)
        newProficiencyState[key].checked = checked
        setProficiencyState(newProficiencyState)
    }

    function handleSeriesChange(checked: boolean, key: string) {
        let newSeriesState = cloneDeep(seriesState)
        newSeriesState[key].checked = checked
        setSeriesState(newSeriesState)
    }

    function sendFilters() {
        const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
        const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
        const checkedProficiencyFilters = Object.values(proficiencyState).filter(x => x.checked).map((x, i) => x.id)
        const checkedSeriesFilters = Object.values(seriesState).filter(x => x.checked).map((x, i) => x.id)
        
        const filters = {
            rarity: checkedRarityFilters,
            element: checkedElementFilters,
            proficiency1: checkedProficiencyFilters,
            series: checkedSeriesFilters
        }

        props.sendFilters(filters)
    }

    useEffect(() => {
        sendFilters()
    }, [rarityState, elementState, proficiencyState, seriesState])

    return (
        <div className="SearchFilterBar">
            <SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
                <DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
                { Array.from(Array(rarities.length)).map((x, i) => {
                    return (
                        <SearchFilterCheckboxItem 
                            key={rarities[i]}
                            onCheckedChange={handleRarityChange} 
                            checked={rarityState[rarities[i]].checked} 
                            valueKey={rarities[i]}>
                                {t(`rarities.${rarities[i]}`)}
                        </SearchFilterCheckboxItem>
                    )}
                ) }
            </SearchFilter>

            <SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
                <DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
                { Array.from(Array(elements.length)).map((x, i) => {
                    return (
                        <SearchFilterCheckboxItem 
                            key={elements[i]}
                            onCheckedChange={handleElementChange} 
                            checked={elementState[elements[i]].checked} 
                            valueKey={elements[i]}>
                                {t(`elements.${elements[i]}`)}
                        </SearchFilterCheckboxItem>
                    )}
                ) }
            </SearchFilter>

            <SearchFilter label={t('filters.labels.proficiency')} numSelected={Object.values(proficiencyState).map(x => x.checked).filter(Boolean).length} open={proficiencyMenu} onOpenChange={proficiencyMenuOpened}>
                <DropdownMenu.Label className="Label">{t('filters.labels.proficiency')}</DropdownMenu.Label>
                <section>
                    <DropdownMenu.Group className="Group">
                        { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
                            return (
                                <SearchFilterCheckboxItem 
                                    key={proficiencies[i]}
                                    onCheckedChange={handleProficiencyChange} 
                                    checked={proficiencyState[proficiencies[i]].checked} 
                                    valueKey={proficiencies[i]}>
                                        {t(`proficiencies.${proficiencies[i]}`)}
                                </SearchFilterCheckboxItem>
                            )}
                        ) }
                    </DropdownMenu.Group>
                    <DropdownMenu.Group className="Group">
                        { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
                            return (
                                <SearchFilterCheckboxItem 
                                    key={proficiencies[i + (proficiencies.length / 2)]}
                                    onCheckedChange={handleProficiencyChange} 
                                    checked={proficiencyState[proficiencies[i + (proficiencies.length / 2)]].checked} 
                                    valueKey={proficiencies[i + (proficiencies.length / 2)]}>
                                        {t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
                                </SearchFilterCheckboxItem>
                            )}
                        ) }
                    </DropdownMenu.Group>
                </section>
            </SearchFilter>

            <SearchFilter label={t('filters.labels.series')} numSelected={Object.values(seriesState).map(x => x.checked).filter(Boolean).length} open={seriesMenu} onOpenChange={seriesMenuOpened}>
                <DropdownMenu.Label className="Label">{t('filters.labels.series')}</DropdownMenu.Label>
                <section>
                    <DropdownMenu.Group className="Group">
                        { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
                            return (
                                <SearchFilterCheckboxItem 
                                    key={weaponSeries[i]}
                                    onCheckedChange={handleSeriesChange} 
                                    checked={seriesState[weaponSeries[i]].checked} 
                                    valueKey={weaponSeries[i]}>
                                        {t(`series.${weaponSeries[i]}`)}
                                </SearchFilterCheckboxItem>
                            )}
                        ) }
                    </DropdownMenu.Group>
                    <DropdownMenu.Group className="Group">
                        { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
                            return (
                                <SearchFilterCheckboxItem 
                                    key={weaponSeries[i + (weaponSeries.length / 3)]}
                                    onCheckedChange={handleSeriesChange} 
                                    checked={seriesState[weaponSeries[i + (weaponSeries.length / 3)]].checked} 
                                    valueKey={weaponSeries[i + (weaponSeries.length / 3)]}>
                                        {t(`series.${weaponSeries[i + (weaponSeries.length / 3)]}`)}
                                </SearchFilterCheckboxItem>
                            )}
                        ) }
                    </DropdownMenu.Group>
                    <DropdownMenu.Group className="Group">
                        { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
                            return (
                                <SearchFilterCheckboxItem 
                                    key={weaponSeries[i + (2 * (weaponSeries.length / 3))]}
                                    onCheckedChange={handleSeriesChange} 
                                    checked={seriesState[weaponSeries[i + (2 * (weaponSeries.length / 3))]].checked} 
                                    valueKey={weaponSeries[i + (2 * (weaponSeries.length / 3))]}>
                                        {t(`series.${weaponSeries[i + (2 * (weaponSeries.length / 3))]}`)}
                                </SearchFilterCheckboxItem>
                            )}
                        ) }
                    </DropdownMenu.Group>
                </section>
            </SearchFilter>
        </div>
    )
}

export default WeaponSearchFilterBar