hensei-web/components/CharacterSearchFilterBar/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 } from '~utils/emptyStates'
import { elements, proficiencies, rarities } from '~utils/stateValues'

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

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

    const [rarityMenu, setRarityMenu] = useState(false)
    const [elementMenu, setElementMenu] = useState(false)
    const [proficiency1Menu, setProficiency1Menu] = useState(false)
    const [proficiency2Menu, setProficiency2Menu] = useState(false)

    const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
    const [elementState, setElementState] = useState<ElementState>(emptyElementState)
    const [proficiency1State, setProficiency1State] = useState<ProficiencyState>(emptyProficiencyState)
    const [proficiency2State, setProficiency2State] = useState<ProficiencyState>(emptyProficiencyState)

    function rarityMenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(true)
            setElementMenu(false)
            setProficiency1Menu(false)
            setProficiency2Menu(false)
        } else setRarityMenu(false)
    }

    function elementMenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(false)
            setElementMenu(true)
            setProficiency1Menu(false)
            setProficiency2Menu(false)
        } else setElementMenu(false)
    }

    function proficiency1MenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(false)
            setElementMenu(false)
            setProficiency1Menu(true)
            setProficiency2Menu(false)
        } else setProficiency1Menu(false)
    }

    function proficiency2MenuOpened(open: boolean) {
        if (open) {
            setRarityMenu(false)
            setElementMenu(false)
            setProficiency1Menu(false)
            setProficiency2Menu(true)
        } else setProficiency2Menu(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 handleProficiency1Change(checked: boolean, key: string) {
        let newProficiencyState = cloneDeep(proficiency1State)
        newProficiencyState[key].checked = checked
        setProficiency1State(newProficiencyState)
    }

    function handleProficiency2Change(checked: boolean, key: string) {
        let newProficiencyState = cloneDeep(proficiency2State)
        newProficiencyState[key].checked = checked
        setProficiency2State(newProficiencyState)
    }

    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 checkedProficiency1Filters = Object.values(proficiency1State).filter(x => x.checked).map((x, i) => x.id)
        const checkedProficiency2Filters = Object.values(proficiency2State).filter(x => x.checked).map((x, i) => x.id)

        const filters = {
            rarity: checkedRarityFilters,
            element: checkedElementFilters,
            proficiency1: checkedProficiency1Filters,
            proficiency2: checkedProficiency2Filters
        }

        props.sendFilters(filters)
    }

    useEffect(() => {
        sendFilters()
    }, [rarityState, elementState, proficiency1State, proficiency2State])

    function renderProficiencyFilter(proficiency: 1 | 2) {
        const onCheckedChange = (proficiency == 1) ? handleProficiency1Change : handleProficiency2Change
        const numSelected = (proficiency == 1) 
            ? Object.values(proficiency1State).map(x => x.checked).filter(Boolean).length 
            : Object.values(proficiency2State).map(x => x.checked).filter(Boolean).length 
        const open = (proficiency == 1) ? proficiency1Menu : proficiency2Menu
        const onOpenChange = (proficiency == 1) ? proficiency1MenuOpened : proficiency2MenuOpened
        
        return (
            <SearchFilter 
                label={`${t('filters.labels.proficiency')} ${proficiency}`} 
                numSelected={numSelected} 
                open={open} 
                onOpenChange={onOpenChange}>
                    <DropdownMenu.Label className="Label">{`${t('filters.labels.proficiency')} ${proficiency}`}</DropdownMenu.Label>
                    <section>
                        <DropdownMenu.Group className="Group">
                            { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
                                const checked = (proficiency == 1) 
                                    ? proficiency1State[proficiencies[i]].checked 
                                    : proficiency2State[proficiencies[i]].checked

                                return (
                                    <SearchFilterCheckboxItem 
                                        key={proficiencies[i]}
                                        onCheckedChange={onCheckedChange} 
                                        checked={checked}
                                        valueKey={proficiencies[i]}>
                                            {t(`proficiencies.${proficiencies[i]}`)}
                                    </SearchFilterCheckboxItem>
                                )}
                            ) }
                        </DropdownMenu.Group>
                        <DropdownMenu.Group className="Group">
                            { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
                                const checked = (proficiency == 1) 
                                    ? proficiency1State[proficiencies[i + (proficiencies.length / 2)]].checked 
                                    : proficiency2State[proficiencies[i + (proficiencies.length / 2)]].checked

                                return (
                                    <SearchFilterCheckboxItem 
                                        key={proficiencies[i + (proficiencies.length / 2)]}
                                        onCheckedChange={onCheckedChange} 
                                        checked={checked}
                                        valueKey={proficiencies[i + (proficiencies.length / 2)]}>
                                            {t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
                                    </SearchFilterCheckboxItem>
                                )}
                            ) }
                        </DropdownMenu.Group>
                    </section>
            </SearchFilter>
        )
    }

    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>

            { renderProficiencyFilter(1) }
            { renderProficiencyFilter(2) }
        </div>
    )
}

export default CharacterSearchFilterBar