spa_instat_tv/src/features/HomePage/components/Dropdown/index.tsx

import React, { useMemo } from 'react'

import map from 'lodash/map'
import isEmpty from 'lodash/isEmpty'
import includes from 'lodash/includes'

import { T9n } from 'features/T9n'
import { Name } from 'features/Name'
import { useLexicsStore } from 'features/LexicsStore'
import { isMobileDevice } from 'config/userAgent'

import {
  getAge,
  getArena,
  getDivision,
  getGender,
  getMainTeam,
  getRound,
} from './helpers'
import {
  TDropDownProps,
  TFilterItem,
  TItem,
} from './types'
import {
  DropDownContainer,
  FiltersList,
  FilterItem,
  Checkbox,
  CommonButtonsBlock,
  ClearButtonContainer,
  SearchWithAllContainer,
  SearchContainer,
  SearchInput,
  BackButton,
} from './styled'

const Label = ({ item }: TFilterItem) => {
  const isNumber = typeof item === 'number'

  return (
    <>
      {isNumber ? (<>U{item}</>) : (<Name nameObj={item} />)}
    </>
  )
}

export const DropDown = ({
  activeFilters,
  changeInput,
  clearFilters,
  closeDropdownList,
  filterList,
  filterTitle,
  inputValue,
  setFilters,
}: TDropDownProps) => {
  const { translate } = useLexicsStore()

  const dropDownList = useMemo(() => {
    switch (filterTitle) {
      case 'gender':
        return getGender(filterList)
      case 'youth_age':
        return getAge(filterList)
      case 'division':
        return getDivision(filterList)
      case 'main_team':
        return getMainTeam(filterList)
      case 'arena':
        return getArena(filterList, inputValue)
      case 'round':
        return getRound(filterList)
      default:
        return []
    }
  }, [filterTitle, filterList, inputValue]) as Array<TItem> | Array<any>

  const currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters]

  return (
    <DropDownContainer>
      <FiltersList>
        <CommonButtonsBlock isArena={filterTitle === 'arena'}>
          <SearchWithAllContainer>
            {/* {isMobileDevice && (<T9n className='filter_title' t={filterTitle} />)} */}
            {isMobileDevice && closeDropdownList
              && (
                <BackButton onClick={closeDropdownList} className='back_button'>
                  {filterTitle}
                </BackButton>
              )}
            {filterTitle === 'arena' && (
              <SearchContainer>
                <SearchInput
                  onChange={changeInput}
                  onClick={(e) => e.stopPropagation()}
                  placeholder={translate('search')}
                />
              </SearchContainer>
            )}
            <Checkbox
              onChange={clearFilters(filterTitle)}
              checked={isEmpty(currentActiveFilter)}
              labelLexic='all'
            />
          </SearchWithAllContainer>
          <ClearButtonContainer
            onClick={clearFilters(filterTitle)}
          >
            <T9n
              className='clear_button'
              t='clear'
            />
          </ClearButtonContainer>
        </CommonButtonsBlock>

        {!isEmpty(dropDownList) && map(dropDownList, (filterItem, i) => (
          <>
            <FilterItem
              key={i}
              onClick={(e) => {
                e.preventDefault()
                e.stopPropagation()
                setFilters(filterTitle, filterItem)
              }}
            >
              {filterTitle === 'gender'
                ? (
                  <Checkbox
                    checked={includes(currentActiveFilter,
                      filterItem || filterItem.name_eng
                        || filterItem.name_rus)}
                    onChange={(e) => {
                      e.preventDefault()
                      e.stopPropagation()
                      setFilters(filterTitle, filterItem)
                    }}
                    labelLexic={filterItem.title}
                  />
                )
                : (
                  <Checkbox
                    checked={includes(currentActiveFilter,
                      filterItem || filterItem.name_eng || filterItem.name_rus)}
                    onChange={(e) => {
                      e.preventDefault()
                      e.stopPropagation()
                      setFilters(filterTitle, filterItem)
                    }}
                    label={(<Label item={filterItem} />)}
                  />
                )}
            </FilterItem>
          </>
        ))}
      </FiltersList>
    </DropDownContainer>
  )
}