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

import { Tag, Tooltip } from 'antd'
import { CloseCircleOutlined } from '@ant-design/icons'

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

  const { delSearchParams, chooseSavedSearchParams } = store.savedSearchParams

  const handleDelAction = useCallback(
    (e, i) => {
      e.stopPropagation()
      delSearchParams(i)
    },
    [delSearchParams]
  )

  return useObserver(() => {
    const { showType, currentShowSearchParams } = store.savedSearchParams

    return (
      <div className={styles['saved-search-params']}>
        {currentShowSearchParams.map(({ str }, i) => (
          <Tag className="tag" key={str} color={showType === 'saved' ? 'geekblue' : 'orange'}>
            <div className="content">
              <Tooltip title={str}>
                <div className="params-item" onClick={() => chooseSavedSearchParams(i)}>
                  {str}
                </div>
              </Tooltip>
              <Tooltip title="移除该搜索条件">
                <CloseCircleOutlined onClick={e => handleDelAction(e, i)} />
              </Tooltip>
            </div>
          </Tag>
        ))}
      </div>
    )
  })
}

export default SavedSearchParams