import {useState} from 'react'
import PropTypes from 'prop-types'

import {
  Divider,
  FormControl,
  InputAdornment,
  InputBase,
  makeStyles
} from '@material-ui/core'

import SearchIcon from '@material-ui/icons/Search'

import MizikLis from '../awtis/mizik-lis'

const useStyles = makeStyles(theme => ({
  toolbar: theme.mixins.toolbar,
  list: {
    marginBottom: '6em'
  },
  form: {
    marginLeft: theme.spacing(1)
  },
  text: {
    marginBottom: '0.5em'
  }
}))

const getMizikFiltered = (miziks, filter) => {
  if (miziks) {
    return miziks.filter(({titre}) => titre.toLowerCase().includes(filter.toLowerCase()))
  }
}

export default function DrawerBar({setMobileOpen, miziks, mizik}) {
  const slug = mizik ? mizik[0].slug : null
  const classes = useStyles()

  const [search, setSearch] = useState('')
  const [selectedMizikSlug, setSelectedMizikSlug] = useState(slug)

  const mizikFiltered = getMizikFiltered(miziks, search)

  const handleSearch = event => {
    event.preventDefault()
    const value = event.target.value
    setSearch(value)
  }

  return (
    <div className='search'>
      <FormControl className={classes.form}>
        <InputBase
          className={classes.toolbar}
          placeholder='Chèché an tèks'
          startAdornment={
            <InputAdornment position='start'>
              <SearchIcon />
            </InputAdornment>
          }
          value={search}
          onChange={handleSearch}
        />
      </FormControl>
      <Divider />
      <div className={classes.list}>
        <MizikLis
          hasAwtis
          setMobileOpen={setMobileOpen}
          miziks={mizikFiltered}
          selectedMizikSlug={selectedMizikSlug}
          setSelectedMizikSlug={setSelectedMizikSlug}
        />
      </div>
    </div>
  )
}

DrawerBar.propTypes = {
  setMobileOpen: PropTypes.func,
  miziks: PropTypes.array.isRequired,
  mizik: PropTypes.array
}

DrawerBar.defaultProps = {
  setMobileOpen: null,
  mizik: null
}