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

import SavedSearchParams from '../SavedSearchParams'
import SavedSearchParamsToggleBtn from '../SavedSearchParamsToggleBtn'

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

  const { init } = store.savedSearchParams

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

  return useObserver(() => {
    const { hideSaveSearchParams } = store.main.config
    const { allSavedSearchParams } = store.savedSearchParams

    if (!allSavedSearchParams.length || hideSaveSearchParams) return null

    return (
      <div className={styles['saved-search-params-bar']}>
        <SavedSearchParams />

        <SavedSearchParamsToggleBtn />
      </div>
    )
  })
}

export default SavedSearchParamsBar