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} 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 = anTeks => {
  const langArray = []

  if (anTeks && anTeks.tradiksyon) {
    const {francais, english, espagnol, deutsch, italiano} = 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})
    }

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

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

  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({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
  const isMobile = useMediaQuery('(max-width:800px)')
  const langArray = langToArray(anTeks)
  const awtis = anTeks.awtis.map(({alias}) => alias)

  return (
    <Root>
      <div className={classes.pataje}>
        <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
      </div>
      <Box sx={{textAlign: 'center', marginTop: 9}}>
        <Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'>
          <Typography gutterBottom variant='h6' component='div'>
            {new Intl.ListFormat('fr').format(awtis)}
          </Typography>
          <Typography variant='h5' component='div'>
            {anTeks.tit} <small>({anTeks?.lanne})</small>
            {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} />
            )}
          </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} teks={anTeks} />
      )}
      <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>
                )}
                {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 = {
  anTeks: PropTypes.object.isRequired,
  komante: 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 = {
  komante: null,
  success: '',
  error: ''
}