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

import FilterItem from '../FilterItem'
import FilterItemContainer from '../FilterItemContainer'
import FilterRightHelper from '../FilterRightHelper'
import FilterTag from '../FilterTag'
import { SearchFilterItem } from '../../types/searchSelect'

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

  const { setFoldAbleActiveFilter } = store.main

  const handleSelect = useCallback(
    (filter: SearchFilterItem) => {
      setFoldAbleActiveFilter(filter)
    },
    [setFoldAbleActiveFilter]
  )

  return useObserver(() => {
    const { foldAbleFilters, foldAbleActiveFilter } = store.main

    return (
      <React.Fragment>
        <FilterItemContainer name="筛选条件">
          <div className={styles['tags-container']}>
            {foldAbleFilters.map(filter => (
              <FilterTag
                key={filter.tag.name}
                text={filter.tag.name}
                selected={foldAbleActiveFilter?.tag?.name === filter.tag.name}
                onClick={() => handleSelect(filter)}
              />
            ))}
          </div>

          <FilterRightHelper type="SINGLE_TIP" />
        </FilterItemContainer>

        {foldAbleActiveFilter && <FilterItem filter={foldAbleActiveFilter} />}
      </React.Fragment>
    )
  })
}

export default FoldAbleFilters