import PropTypes from 'prop-types'
import {useRouter} from 'next/router'

import {makeStyles} from '@material-ui/core/styles'
import {List, ListItem, ListItemText} from '@material-ui/core'

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}))

export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizikSlug, setSelectedMizikSlug}) {
  const classes = useStyles()
  const router = useRouter()

  const handleClick = slug => {
    if (setSelectedMizikSlug) {
      setSelectedMizikSlug(slug)
    }

    if (slug !== selectedMizikSlug) {
      if (hasAwtis) {
        router.push(`/teks/${slug}`)
      } else {
        router.push(`/teks/${slug}#${slug}`)
      }
    }

    if (setMobileOpen) {
      setMobileOpen(false)
    }
  }

  return (
    <List component='nav' className={classes.root} aria-label='mizik'>
      {miziks.map(({slug, titre, awtis}) => (
        <ListItem
          key={slug}
          button
          id={slug}
          selected={selectedMizikSlug === slug}
          onClick={() => handleClick(slug)}
        >
          <ListItemText primary={titre} secondary={hasAwtis ? awtis.map(a => a.alias).join() : null} />
        </ListItem>
      ))}
    </List>
  )
}

MizikLis.propTypes = {
  setMobileOpen: PropTypes.func,
  hasAwtis: PropTypes.bool,
  miziks: PropTypes.array.isRequired,
  selectedMizikSlug: PropTypes.string,
  setSelectedMizikSlug: PropTypes.func
}

MizikLis.defaultProps = {
  setMobileOpen: null,
  hasAwtis: false,
  selectedMizikSlug: null,
  setSelectedMizikSlug: null
}