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

import NonContactTip from '../NonContactTip'
import { Radio } from 'antd'

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

  const { setSearchMode } = store.searchModeRadio

  const handleChange = useCallback(
    e => {
      setSearchMode(e.target.value)
    },
    [setSearchMode]
  )

  return useObserver(() => {
    const { searchMode } = store.searchModeRadio

    return (
      <Radio.Group value={searchMode} onChange={handleChange}>
        <Radio value="all">全部</Radio>
        <Radio value="has-contact">有联系方式</Radio>
        <Radio value="non-contact" className={styles['tips']}>
          无联系方式
          <NonContactTip />
        </Radio>
      </Radio.Group>
    )
  })
}

export default SearchModeRadio