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

import { Switch } from 'antd'

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

  const { setChecked } = store.hasPhoneSwitch

  const handleChange = useCallback(
    value => {
      setChecked(value)
    },
    [setChecked]
  )

  return useObserver(() => {
    const { checked } = store.hasPhoneSwitch

    return (
      <div className={styles['has-phone-switch']}>
        只显示有手机号的
        <Switch checked={checked} onChange={handleChange} />
      </div>
    )
  })
}

export default HasPhoneSwitch