import React from 'react'
import {
  SearchFilterItem,
  SemiAutoCategoryFilter,
  CategoryFilter as TCategoryFilter,
  RangeUnitFilter,
} from '../../types/searchSelect'

import CategoryFilter from '../CategoryFilter'
import RangeFilter from '../RangeFilter'

type ComponentProps = {
  filter: SearchFilterItem
}

const FilterContent: React.FC<ComponentProps> = ({ filter }) => {
  return (
    <React.Fragment>
      {((filter as SemiAutoCategoryFilter).tag.type === 'SemiAutoCategoryTag' ||
        (filter as TCategoryFilter).tag.type === 'CategoryTag') && (
        <CategoryFilter filter={filter as SemiAutoCategoryFilter | TCategoryFilter} />
      )}

      {(filter as RangeUnitFilter).tag.type === 'RangeUnitTag' && (
        <RangeFilter filter={filter as RangeUnitFilter} />
      )}
    </React.Fragment>
  )
}

export default FilterContent