import React from 'react'
import styles from './index.module.less'
import { useStore } from '../../store'

import FoldAbleFilters from '../FoldAbleFilters'
import FoldAbleNotFilters from '../FoldAbleNotFilters'
import { Spin } from 'antd'

const ChooseAbleFilters: React.FC = () => {
  const [store, useObserver] = useStore()

  return useObserver(() => {
    const { allFilters, filterBox, searchingCandidate } = store.main

    if (!allFilters.length || !filterBox) return null

    return (
      <div className={styles['choose-able-filters']}>
        <Spin spinning={searchingCandidate}>
          <FoldAbleNotFilters />

          <FoldAbleFilters />
        </Spin>
      </div>
    )
  })
}

export default ChooseAbleFilters