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

import SearchModeRadio from '../SearchModeRadio'
import SearchPagination from '../SearchPagination'
import ResultCount from '../ResultCount'
import HasPhoneSwitch from '../HasPhoneSwitch'
import SearchTip from '../SearchTip'

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

  return useObserver(() => {
    const { total } = store.searchPagination.pagination
    const { hideTipsBar } = store.main.config

    return (
      <div className={styles['control-bar']}>
        <div className="row">
          <SearchModeRadio />

          <HasPhoneSwitch />
        </div>

        {!!total && (
          <div className="row">
            <SearchPagination />

            <ResultCount />
          </div>
        )}

        {!hideTipsBar && (<div className="row right">
          <SearchTip />
        </div>)}
      </div>
    )
  })
}

export default ControlBar