pawol.nu/components/teks/teks.js

import {forwardRef} from 'react'
import PropTypes from 'prop-types'
import {
  Box,
  Grid,
  Snackbar,
  Typography,
  Tooltip,
  Zoom,
  useMediaQuery
} from '@mui/material'
import {styled} from '@mui/material/styles'
import MuiAlert from '@mui/material/Alert'
import ExplicitIcon from '@mui/icons-material/Explicit'

import {formatJsonString, getAlias} from '../../lib/utils/format'

import VweKomante from '../komante/vwe-komante'

import EntegreMizik from './entegre-mizik'
import OkiMizik from './oki-mizik'
import Pataje from './pataje'

const PREFIX = 'teks'

const classes = {
  root: `${PREFIX}-root`,
  tooltip: `${PREFIX}-tooltip`,
  text: `${PREFIX}-text`,
  gridText: `${PREFIX}-gridText`,
  grid: `${PREFIX}-grid`,
  koute: `${PREFIX}-koute`,
  vwe: `${PREFIX}-vwe`,
  pataje: `${PREFIX}-pataje`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.text}`]: {
    marginBottom: '0.5em'
  },

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

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

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

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

  if (parole && parole.traductions) {
    const {francais, anglais, espagnol, allemand, italien} = parole.traductions

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

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

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

    if (allemand) {
      langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
    }

    if (italien) {
      langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
    }
  }

  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 Alert = forwardRef(function Alert(props, ref) {
  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
})

const ExplicitTooltip = Tooltip

export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
  const isMobile = useMediaQuery('(max-width:800px)')
  const langArray = langToArray(parole)
  const aliases = getAlias(parole.artistes, parole.prioriteArtistes)

  return (
    <Root>
      <div className={classes.pataje}>
        <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
      </div>
      <Box sx={{textAlign: 'center'}}>
        <Typography variant='h4' component='div' display='block'>
          <Typography gutterBottom variant='h6' component='div'>
            {aliases}
          </Typography>
          <Typography variant='h5' component='div'>
            {parole.titre} <small>({parole?.annee})</small>
            {parole.explicite && (
              <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'>
            {commentaires && (
              <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
            )}
          </Grid>
        </Typography>
        {parole?.user?.data && (
          <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
            <i>parole soumise par {parole.user.data.attributes.username}</i>
          </Typography>
        )}
        {parole?.userAdmin?.data && !parole.user.data && (
          <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
            <i>parole soumise par {parole.userAdmin.data.attributes.username || parole.userAdmin.data.attributes.firstname}</i>
          </Typography>
        )}
      </Box>
      {(parole.okiMizikID || parole.streamAudio.length > 0) && (
        <Box sx={{textAlign: 'center'}}>
          <EntegreMizik parole={parole} isMobile={isMobile} />
        </Box>
      )}
      {parole.okiMizikID && (
        <OkiMizik id={parole.okiMizikID} parole={parole} />
      )}
      <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(parole.transcription)}
            </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>
                )}
                {flag === 'de' && (
                  <span>
                    🇩🇪
                  </span>
                )}
                {flag === 'it' && (
                  <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>
      )}
    </Root>
  )
}

Teks.propTypes = {
  parole: PropTypes.object.isRequired,
  paroleId: PropTypes.number.isRequired,
  commentaires: PropTypes.array,
  open: PropTypes.bool.isRequired,
  success: PropTypes.string,
  error: PropTypes.string,
  setSuccess: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  handleClose: PropTypes.func.isRequired
}

Teks.defaultProps = {
  commentaires: null,
  success: '',
  error: ''
}