pawol.nu/components/teks/teks-drawer.js

import {useEffect, useState, useContext} from 'react'
import Link from 'next/link'
import PropTypes from 'prop-types'
import deburr from 'lodash.deburr'
import union from 'lodash.union'
import {styled} from '@mui/material/styles'
import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import CssBaseline from '@mui/material/CssBaseline'
import Divider from '@mui/material/Divider'
import Drawer from '@mui/material/Drawer'
import IconButton from '@mui/material/IconButton'
import MenuIcon from '@mui/icons-material/Menu'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import FormControl from '@mui/material/FormControl'
import InputAdornment from '@mui/material/InputAdornment'
import InputBase from '@mui/material/InputBase'
import SearchIcon from '@mui/icons-material/Search'
import LinearProgress from '@mui/material/LinearProgress'
import CircularProgress from '@mui/material/CircularProgress'

import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'

import MizikLis from '../awtis/mizik-lis'
import {jwennTeks} from '../../lib/oki-api'

import ParolesListContext from '../../contexts/paroles-list'
import MontreTeks from './montre-teks'
import DenyeTeks from './denye-teks'
import Teks from './teks'
import VweKouteAchte from './vwe-koute-achte'

const drawerWidth = 240

const PREFIX = 'drawer-bar'

const classes = {
  toolbar: `${PREFIX}-toolbar`,
  vwe: `${PREFIX}-vwe`,
  koute: `${PREFIX}-koute`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
}))

const Stream = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.koute}`]: {
    position: 'absolute',
    right: '40px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  },

  [`& .${classes.vwe}`]: {
    position: 'absolute',
    right: '90px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  }
}))

const getMizikFiltered = (paroles, filter) => {
  if (paroles) {
    const filteredTitre = paroles.filter(({attributes}) => {
      const deburredTit = deburr(attributes.titre)
      return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
    })

    const filteredAlias = paroles.filter(({attributes}) => {
      const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
      return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
    })

    return union(filteredTitre, filteredAlias)
  }
}

export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
  const [open, setOpen] = useState(false)
  const {paroles, setParoles} = useContext(ParolesListContext)
  const [mobileOpen, setMobileOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [isParolesHidden, setIsParolesHidden] = useState(true)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const [search, setSearch] = useState('')
  const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)

  const mizikFiltered = getMizikFiltered(paroles, search)

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

  const handleOpenDrawer = async () => {
    setMobileOpen(true)
    if (paroles.length === 0) {
      setIsLoading(true)
      try {
        const teks = await jwennTeks()
        setParoles(teks)
      } catch (error) {
        console.log('⚠️ error', error.message)
      }

      setIsLoading(false)
    }
  }

  const handleCloseDrawer = () => {
    setMobileOpen(false)
  }

  const handleClick = async () => {
    setIsLoading(true)
    try {
      const teks = await jwennTeks()
      setParoles(teks)
    } catch (error) {
      console.log('⚠️ error', error.message)
    }

    setIsLoading(false)
    setIsParolesHidden(false)
  }

  useEffect(() => {
    if (paroles.length > 0) {
      setIsParolesHidden(false)
    }
  }, [paroles.length])

  useEffect(() => {
    if (error || success) {
      setOpen(true)
    }
  }, [error, success, setOpen])

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setOpen(false)
    setSuccess('')
    setError('')
  }

  function CustomDrawer() {
    return (
      <Root>
        <FormControl sx={{marginLeft: 1}}>
          <InputBase
            className={classes.toolbar}
            placeholder='Recherche...'
            startAdornment={
              <InputAdornment position='start'>
                <SearchIcon />
              </InputAdornment>
            }
            value={search}
            onChange={handleSearch}
          />
        </FormControl>
        <Divider />
        <Box sx={{marginBottom: `${mobileOpen ? '' : '3em'}`}}>
          <MizikLis
            niAwtis
            meteEsMobilOuve={setMobileOpen}
            paroles={mizikFiltered}
            slugTeksChwazi={slugTeksChwazi}
            meteSlugTeksChwazi={meteSlugTeksChwazi}
          />
        </Box>
      </Root>
    )
  }

  return (
    <Box sx={{display: 'flex'}}>
      <CssBaseline />
      <AppBar
        position='fixed'
        sx={{
          width: {sm: `calc(100% - ${drawerWidth}px)`},
          ml: {sm: `${drawerWidth}px`},
          borderTop: '2px solid #303030',
          marginTop: '3rem',
          zIndex: 1
        }}
      >
        <Toolbar>
          <IconButton
            color='inherit'
            aria-label='open drawer'
            edge='start'
            sx={{mr: 2, display: {sm: 'none'}}}
            onClick={handleOpenDrawer}
          >
            <MenuIcon />
          </IconButton>
          {parole ? (
            <Stream>
              <Link passHref href='/paroles'>
                <IconButton aria-label='return' size='medium'>
                  <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                </IconButton>
              </Link>
              {parole.streamVideo && parole.streamVideo.length > 0 && (
                <div className={classes.vwe}>
                  <VweKouteAchte niVideyo parole={parole} />
                </div>
              )}
              {parole.streamAudio && parole.streamAudio.length > 0 && (
                <div className={classes.koute}>
                  <VweKouteAchte niOdyo parole={parole} />
                </div>
              )}
            </Stream>
          ) : (
            <Typography noWrap variant='h6'>
              Derniers textes
            </Typography>
          )}
        </Toolbar>
      </AppBar>
      <Box
        component='nav'
        sx={{width: {sm: drawerWidth}, flexShrink: {sm: 0}, padding: 0}}
        aria-label='mailbox folders'
      >
        <Drawer
          variant='temporary'
          open={mobileOpen}
          ModalProps={{
            keepMounted: true
          }}
          sx={{
            display: {xs: 'block', sm: 'none'},
            '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
          }}
          onClose={handleCloseDrawer}
        >
          {isLoading ? (
            <Box sx={{
              position: 'absolute',
              right: 100,
              top: 200,
            }}
            >
              <CircularProgress />
            </Box>
          ) : (
            <CustomDrawer />
          )}
        </Drawer>
        <Drawer
          open
          variant='permanent'
          sx={{
            display: {xs: 'none', sm: 'block'},
            '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth, marginTop: '3em', borderTop: '2px solid #303030'},
          }}
        >
          {isLoading || isParolesHidden ? (
            <>
              <MontreTeks handleClick={handleClick} />
              {isLoading && (
                <Box sx={{width: '100%'}}>
                  <LinearProgress />
                </Box>
              )}
            </>
          ) : (
            <CustomDrawer />
          )}
        </Drawer>
      </Box>
      <Box
        component='main'
        sx={{flexGrow: 1, p: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
      >
        <Toolbar />
        {parole ? (
          <Teks
            parole={parole}
            paroleId={paroleId}
            commentaires={parole?.commentaires.data}
            open={open}
            success={success}
            error={error}
            setSuccess={setSuccess}
            setError={setError}
            handleClose={handleClose}
          />
        ) : (
          <DenyeTeks denyeTeks={denyeTeks} />
        )}
      </Box>
    </Box>
  )
}

TeksDrawer.defaultProps = {
  parole: null,
  paroleId: null,
  slug: null,
  denyeTeks: null
}

TeksDrawer.propTypes = {
  parole: PropTypes.object,
  paroleId: PropTypes.number,
  slug: PropTypes.string,
  denyeTeks: PropTypes.array
}