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

import SearchTypeSelect from '../SearchTypeSelect'
import SearchSelect from '../SearchSelect'
import SaveAndRemoveBtn from '../SaveAndRemoveBtn'

const SearchInput: React.FC = () => {
  const [store, useObserver] = useStore()
  
  const { init } = store.main

  useEffect(() => {
    init()
  }, [init])

  return useObserver(() => {
    const { hideAdvantageFilter } = store.main.config

    return (
      <div className={styles['nd-search-input']}>
        {!hideAdvantageFilter && <SearchTypeSelect />}

        <SearchSelect />

        <SaveAndRemoveBtn />
      </div>
    )
  })
}

export default SearchInput