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

import { Button } from 'antd'

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

  const { saveOrRemove } = store.saveAndRemoveBtn

  return useObserver(() => {
    const { showBtn, isSave, actioning } = store.saveAndRemoveBtn
    const { searchType } = store.searchTypeSelect
    const { hideSaveSearchParams } = store.main.config

    if (!showBtn || searchType === 'resume_by_name' || hideSaveSearchParams) return null

    return <Button className={styles['save-and-remove-btn']} loading={actioning} type={ isSave ? 'primary' : undefined } danger={!isSave} onClick={saveOrRemove}>
      {isSave ? '保存' : '删除'}搜索条件
    </Button>
  })
}

export default SaveAndRemoveBtn