import React from 'react'
import styles from './index.module.less'
import { useStore } from '../../store'
import { getSelectedFilterText, transformChannel } from '../../utils/searchSelect'

import { Tag, Tooltip } from 'antd'

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

  const { switchFilterBox, removeFilter } = store.main

  return useObserver(() => {
    const { filters, filterBox, channelDict } = store.main

    if (!filters.length) return null

    const filterTags = transformChannel(filters, channelDict).map(getSelectedFilterText)

    return (
      <div className={styles['selected-filters']}>
        <div className="filters-container">
          {filterTags.map((tag, i) => (
            <Tooltip key={tag} title="点击以移除该筛选">
              <Tag color="green" onClick={() => removeFilter(i)}>
                {tag}
              </Tag>
            </Tooltip>
          ))}
        </div>

        <Tag className="fold-btn" color="#1890ff" onClick={switchFilterBox}>
          {filterBox ? '收起' : '展开'}筛选
        </Tag>
      </div>
    )
  })
}

export default SelectedFilters