import React, { useContext } from 'react'
import { Grid, Col } from '@siteone/pagebuilder-ui'
import Context from '../EventsContext'
import SearchBar from '../SeachBar'
import Sort from '../Sort'
import styles from './styles.scss'

const MediaLibraryFilter = ({ serchConfig }) => {
  const ctx = useContext(Context)
  return (
    <div className={styles.base}>
      <Grid justifyContent='space-between'>
        <Col size={6} justifyContent='flex-start' flexDirection='row'>
          {/* ... */}
        </Col>
        <Col
          size={6}
          justifyContent='flex-end'
          flexDirection='row'
          alignItems='center'
        >
          <Sort orderBy={ctx.orderBy} onSortChange={ctx.onSortChange} />

          {serchConfig && serchConfig.length > 0 && (
            <div>
              <SearchBar
                serchConfig={serchConfig}
                handleSerachParametersChange={ctx.handleSerachParametersChange}
              />
            </div>
          )}
        </Col>
      </Grid>
    </div>
  )
}

export default MediaLibraryFilter