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

import {useEffect, useState, forwardRef} from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'
import {useSession} from 'next-auth/client'

import {
  Grid,
  Toolbar,
  Typography,
  AppBar,
  CssBaseline,
  Drawer,
  Hidden,
  IconButton,
  Box,
  useMediaQuery,
  Snackbar,
  Tooltip,
  Zoom
} from '@mui/material'

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

import MenuIcon from '@mui/icons-material/Menu'

import {useTheme, styled} from '@mui/material/styles'

import MuiAlert from '@mui/material/Alert'
import {formatJsonString} from '../../lib/utils/format'

import VweKomante from '../komante/vwe-komante'
import Dekoneksyon from '../sesyon/dekoneksyon'

import DrawerBar from './drawer-bar'
import DenyeTeks from './denye-teks'
import VweKouteAchte from './vwe-koute-achte'
import OkiMizik from './oki-mizik'
import Pataje from './pataje'
import EntegreMizik from './entegre-mizik'

const PREFIX = 'teks-drawer'

const classes = {
  tooltip: `${PREFIX}-tooltip`,
  root: `${PREFIX}-root`,
  drawer: `${PREFIX}-drawer`,
  appBar: `${PREFIX}-appBar`,
  menuButton: `${PREFIX}-menuButton`,
  toolbar: `${PREFIX}-toolbar`,
  drawerPaper: `${PREFIX}-drawerPaper`,
  content: `${PREFIX}-content`,
  list: `${PREFIX}-list`,
  form: `${PREFIX}-form`,
  text: `${PREFIX}-text`,
  gridText: `${PREFIX}-gridText`,
  grid: `${PREFIX}-grid`,
  koute: `${PREFIX}-koute`,
  vwe: `${PREFIX}-vwe`,
  pataje: `${PREFIX}-pataje`
}

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

  [`& .${classes.drawer}`]: {
    marginTop: '10em',
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0
    }
  },

  [`& .${classes.appBar}`]: {
    borderTop: '2px solid #303030',
    marginTop: '3rem',
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth
    },
    zIndex: 1
  },

  [`& .${classes.menuButton}`]: {
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },

  [`& .${classes.toolbar}`]: theme.mixins.toolbar,

  [`& .${classes.drawerPaper}`]: {
    borderTop: '2px solid #303030',
    marginTop: '3rem',
    width: drawerWidth
  },

  [`& .${classes.content}`]: {
    flexGrow: 1,
    padding: theme.spacing(1)
  },

  [`& .${classes.list}`]: {
    marginBottom: '6em'
  },

  [`& .${classes.form}`]: {
    marginLeft: theme.spacing(1)
  },

  [`& .${classes.text}`]: {
    marginBottom: '0.5em'
  },

  [`& .${classes.gridText}`]: {
    border: '2px solid grey',
    borderRadius: '5px',
    marginTop: '2em',
    padding: '1em'
  },

  [`& .${classes.grid}`]: {
    marginTop: '1em'
  },

  [`& .${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'
    }
  },

  [`& .${classes.pataje}`]: {
    position: 'fixed',
    top: '59px',
    left: '110px',
    zIndex: 2,
    [theme.breakpoints.up('sm')]: {
      top: '62px',
      left: '340px'
    }
  }
}))

const Alert = forwardRef(function Alert(props, ref) { // eslint-disable-line func-names
  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
})

const drawerWidth = 240

const langToArray = anTeks => {
  const langArray = []

  if (anTeks && anTeks.tradiksyon) {
    const {francais, english, espagnol} = anTeks.tradiksyon

    if (francais) {
      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
    }

    if (english) {
      langArray.push({title: 'Translation', flag: 'en', lang: english})
    }

    if (espagnol) {
      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
    }
  }

  return langArray
}

const alignTeks = (langArray, isMobile) => {
  if (langArray.length > 0 && !isMobile) {
    return 'justify'
  }

  if (langArray.length > 0 && isMobile) {
    return 'justify'
  }

  if (langArray.length === 0 && isMobile) {
    return 'justify'
  }

  if (langArray.length === 0 && !isMobile) {
    return 'center'
  }
}

const ExplicitTooltip = Tooltip

export default function TeksDrawer({teks, anTeks, komante}) {
  const [session] = useSession()

  const isMobile = useMediaQuery('(max-width:800px)')
  const langArray = langToArray(anTeks)

  const theme = useTheme()
  const [esMobilOuve, meteEsMobilOuve] = useState(false)
  const [open, setOpen] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

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

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

  const handleDrawerToggle = () => {
    meteEsMobilOuve(!esMobilOuve)
  }

  const container = typeof window === 'undefined' ? undefined : () => window.document.body

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

  return (
    <Root className={classes.root}>
      <CssBaseline />
      <AppBar position='fixed' className={classes.appBar}>
        <Toolbar>
          <IconButton
            color='inherit'
            aria-label='open drawer'
            edge='start'
            className={classes.menuButton}
            size='large'
            onClick={handleDrawerToggle}
          >
            <MenuIcon />
          </IconButton>
          {anTeks ? (
            <>
              <Link passHref href='/teks'>
                <IconButton aria-label='return' size='medium'>
                  <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                </IconButton>
              </Link>
              {anTeks.lyen && anTeks.lyen.length > 0 && (
                <div className={classes.vwe}>
                  <VweKouteAchte niVideyo anTeks={anTeks} />
                </div>
              )}
              {anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
                <div className={classes.koute}>
                  <VweKouteAchte niOdyo anTeks={anTeks} />
                </div>
              )}
            </>
          ) : (
            <Typography noWrap variant='h6'>
              Dènyé Tèks
            </Typography>
          )}
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer} aria-label='mailbox folders'>
        <Hidden smUp implementation='css'>
          <Drawer
            container={container}
            variant='temporary'
            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
            open={esMobilOuve}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true
            }}
            onClose={handleDrawerToggle}
          >
            <DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
          </Drawer>
        </Hidden>
        <Hidden smDown implementation='css'>
          <Drawer
            open
            classes={{
              paper: classes.drawerPaper
            }}
            variant='permanent'
          >
            <DrawerBar teks={teks} anTeks={anTeks} />
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        {anTeks ? (
          <>
            <div className={classes.pataje}>
              <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
            </div>
            <Box sx={{textAlign: 'center', marginTop: 8}}>
              <Typography style={{marginTop: '0.8em'}} variant='h4' display='block'>
                <Typography gutterBottom variant='h6'>
                  {anTeks.awtis.map(a => a.alias).join(', ')}
                </Typography>
                <Typography variant='h5'>
                  {anTeks.tit}
                  {anTeks.eksplisit && (
                    <ExplicitTooltip
                      title='Explicit Lyrics'
                      placement='bottom'
                      TransitionComponent={Zoom}
                      classes={{
                        tooltip: classes.tooltip
                      }}
                    >
                      <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
                    </ExplicitTooltip>
                  )}
                </Typography>
                <Grid container alignItems='center' justifyContent='center'>
                  {komante && (
                    <VweKomante komante={komante} teks={anTeks} />
                  )}
                  {session && (
                    <Dekoneksyon tooltipPlacement='bottom' />
                  )}
                </Grid>
              </Typography>
              {anTeks.user && (
                <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
                  <i>texte soumis par {anTeks.user.username}</i>
                </Typography>
              )}
            </Box>
            {(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
              <Box sx={{textAlign: 'center'}}>
                <EntegreMizik anTeks={anTeks} isMobile={isMobile} />
              </Box>
            )}
            {anTeks.okiMizikID && (
              <OkiMizik id={anTeks.okiMizikID} />
            )}
            <Grid container justifyContent='start' spacing={1}>
              <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
                <div className={classes.gridText}>
                  <Typography align='center' className={classes.text} variant='h4'>
                    Transcription
                  </Typography>
                  <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
                    {formatJsonString(anTeks.transkripsyon)}
                  </Typography>
                </div>
              </Grid>
              {langArray.map(({title, flag, lang}) => (
                <Grid key={title} item xs={12} md={6}>
                  <div className={classes.gridText}>
                    <Typography align='center' className={classes.text} variant='h4'>
                      {flag === 'fr' && (
                        <span>
                          🇫🇷
                        </span>
                      )}
                      {flag === 'en' && (
                        <span>
                          🇬🇧
                        </span>
                      )}
                      {flag === 'es' && (
                        <span>
                          🇪🇸
                        </span>
                      )} {title}
                    </Typography>
                    <Typography paragraph align='justify' component='span'>
                      {formatJsonString(lang)}
                    </Typography>
                  </div>
                </Grid>
              ))}
            </Grid>
            {success && (
              <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
                <Alert severity='success' onClose={handleClose}>
                  <strong>{success}</strong>
                </Alert>
              </Snackbar>
            )}
            {error && (
              <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
                <Alert severity='error' onClose={handleClose}>
                  <strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
                </Alert>
              </Snackbar>
            )}
          </>
        ) : (
          <DenyeTeks {...teks} />
        )}
      </main>
    </Root>
  )
}

TeksDrawer.propTypes = {
  teks: PropTypes.array.isRequired,
  anTeks: PropTypes.object,
  komante: PropTypes.array
}

TeksDrawer.defaultProps = {
  anTeks: null,
  komante: null
}