pawol.nu/components/soumet/ekri-teks.js

import {useCallback, useEffect, forwardRef, useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import axios from 'axios'
import {useSession} from 'next-auth/react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Container from '@mui/material/Container'
import FormControl from '@mui/material/FormControl'
import FormHelperText from '@mui/material/FormHelperText'
import Grid from '@mui/material/Unstable_Grid2'
import IconButton from '@mui/material/IconButton'
import InputAdornment from '@mui/material/InputAdornment'
import InputLabel from '@mui/material/InputLabel'
import LinearProgress from '@mui/material/LinearProgress'
import OutlinedInput from '@mui/material/OutlinedInput'
import Snackbar from '@mui/material/Snackbar'
import TextField from '@mui/material/TextField'
import Tooltip from '@mui/material/Tooltip'
import Typography from '@mui/material/Typography'

import MuiAlert from '@mui/material/Alert'
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'

import {jwennAnTeks} from '../../lib/oki-api'

import AjouteTradiksyon from './ajoute-tradiksyon'

const PREFIX = 'EkriTeks'

const classes = {
  tooltip: `${PREFIX}-tooltip`
}

const StyledContainer = styled(Container)(() => ({
  [`& .${classes.tooltip}`]: {
    fontSize: 18
  }
}))

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'

const textLabels = {
  fr: {
    title: 'Traduction',
    help: 'Traduction des paroles',
    emoji: '🇫🇷'
  },
  en: {
    title: 'Translation',
    help: 'Translation of the lyrics',
    emoji: '🇬🇧'
  },
  es: {
    title: 'Traducción',
    help: 'Traducción de la letra',
    emoji: '🇪🇸'
  },
  de: {
    title: 'Übersetzung',
    help: 'Übersetzung von Liedtexten',
    emoji: '🇩🇪'
  },
  it: {
    title: 'Traduzione',
    help: 'Traduzione del testo',
    emoji: '🇮🇹'
  }
}

const Alert = forwardRef(function Alert(props, ref) {
  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
})

const RemoveTooltip = Tooltip

function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
  const {data: session} = useSession()
  const {jwt, user} = session
  const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: ''})
  const [tradiksyon, setTradiksyon] = useState({fr: '', en: '', es: '', de: '', it: ''})
  const [kiChawLang, setKiChwalang] = useState(['fr'])
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [loading, setLoading] = useState(false)
  const [currentTeksId, setCurrentTeksId] = useState(null)
  const [open, setOpen] = useState(false)
  const [tradiksyonOtomatik, setTradiksyonOtomatik] = useState(false)

  const handleUpdate = useCallback(update => {
    setTeksEkri({...teksEkri, ...update})
  }, [teksEkri])

  const handleUpdateTradiksyon = useCallback(update => {
    setTradiksyon({...tradiksyon, ...update})
  }, [tradiksyon])

  const handleRemoveTradiksyon = useCallback(idTradiksyon => {
    setKiChwalang(kiChawLang.filter(t => t !== idTradiksyon))
  }, [kiChawLang, setKiChwalang])

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

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

  const handleClick = async () => {
    setLoading(true)
    const {awtis, tit, transkripsyon} = teksEkri
    const {fr, en, es, de, it} = tradiksyon

    if (teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === '') {
      setError({message: 'Certains champs sont obligatoires'})
      setLoading(false)

      return
    }

    const headers = {
      'content-type': 'application/json',
      Authorization: `Bearer ${jwt}`
    }

    if (currentTeksId) {
      try {
        const teks = await jwennAnTeks(currentTeksId, jwt)
        const teksResponse = await axios.put(`${API_URL}/paroles/${currentTeksId}`, {
          data: {
            id: teks.id,
            titre: tit,
            transcription: transkripsyon,
            traductions: {
              francais: fr === '' ? null : fr,
              anglais: en === '' ? null : en,
              espagnol: es === '' ? null : es,
              allemand: de === '' ? null : de,
              italien: it === '' ? null : it
            },
            user: {
              id: user.id,
              username: user.username,
              email: user.email
            },
            artistes: teks.artistes.map(({id}) => id),
            traductionAuto: tradiksyonOtomatik
          }
        }, {
          headers
        })

        const {data} = teksResponse
        setSuccess(`Le morceau "${data.tit}" a été modifié avec succès. Il apparaîtra sur le site après validation.`)
        setLoading(false)
      } catch (error) {
        setError(error?.response?.data)
        setLoading(false)
      }
    } else {
      try {
        const artiste = await axios.post(`${API_URL}/artistes`, {
          data: {
            alias: awtis,
            user: {
              id: user.id,
              username: user.username,
              email: user.email
            }
          }
        }, {
          headers
        })

        const parole = await axios.post(`${API_URL}/paroles`, {
          data: {
            titre: tit,
            transcription: transkripsyon,
            traductions: {
              francais: fr === '' ? null : fr,
              anglais: en === '' ? null : en,
              espagnol: es === '' ? null : es,
              allemand: de === '' ? null : de,
              italien: it === '' ? null : it
            },
            user: {
              id: user.id,
              username: user.username,
              email: user.email
            },
            artistes: [artiste.data.id],
            traductionAuto: tradiksyonOtomatik
          }
        }, {
          headers
        })

        const {data} = parole

        setSuccess(`Le texte "${data.titre}" a été soumis avec succès. Il apparaîtra sur le site après validation.`)
        setLoading(false)
      } catch (error) {
        setError(error?.response?.data)
        setLoading(false)
      }
    }
  }

  const handleReset = () => {
    setTeksEkri({awtis: '', tit: '', transkripsyon: ''})
    setTradiksyon({fr: '', en: '', es: '', de: '', it: ''})
    setKiChwalang(['fr'])
    setCurrentTeksId(null)
    setTradiksyonOtomatik(false)
  }

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

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

  useEffect(() => {
    if (selectedTeks) {
      setTradiksyonOtomatik(false)
      setCurrentTeksId(selectedTeks.id)
      setTeksEkri({
        awtis: new Intl.ListFormat('fr').format(selectedTeks.artistes.map(({alias}) => alias)),
        tit: selectedTeks.titre,
        transkripsyon: selectedTeks.transcription
      })
      setTradiksyon({
        fr: selectedTeks?.traductions?.francais || '',
        en: selectedTeks?.traductions?.anglais || '',
        es: selectedTeks?.traductions?.espagnol || '',
        de: selectedTeks?.traductions?.allemand || '',
        it: selectedTeks?.traductions?.italien || ''
      })

      const jennLangId = () => {
        const ids = []

        if (selectedTeks?.traductions?.francais) {
          ids.push('fr')
        }

        if (selectedTeks?.traductions?.anglais) {
          ids.push('en')
        }

        if (selectedTeks?.traductions?.espagnol) {
          ids.push('es')
        }

        if (selectedTeks?.traductions?.allemand) {
          ids.push('de')
        }

        if (selectedTeks?.traductions?.italien) {
          ids.push('it')
        }

        return ids
      }

      const langIds = jennLangId()

      setKiChwalang(langIds)
    }

    return () => {
      setSelectedTeks(null)
    }
  }, [teksEkri, selectedTeks, setSelectedTeks, kiChawLang])

  return (
    <StyledContainer maxWidth='sm'>
      <Box sx={{textAlign: 'center', marginBottom: 2}}>
        <Typography display='inline' variant='h6' component='h1'>
          Soumettre une parole
        </Typography>
      </Box>
      <form noValidate autoComplete='off'>
        <Grid container style={{textAlign: 'center'}} spacing={1}>
          <Grid xs>
            <TextField
              required
              id='awtis'
              name='awtis'
              label='Artiste'
              value={teksEkri.awtis}
              disabled={Boolean(currentTeksId)}
              variant='outlined'
              helperText='Nom de l’artiste (obligatoire)'
              onChange={event => handleUpdate({awtis: event.target.value})}
            />
          </Grid>
          <Grid xs>
            <TextField
              required
              id='tit'
              name='tit'
              label='Titre'
              value={selectedTeks?.tit || teksEkri.tit}
              variant='outlined'
              helperText='Titre de la musique (obligatoire)'
              onChange={event => handleUpdate({tit: event.target.value})}
            />
          </Grid>
        </Grid>
        <TextField
          fullWidth
          multiline
          required
          helperText='Transcription des paroles (obligatoire)'
          style={{marginTop: '1em'}}
          id='transkripsyon'
          label='Transcription'
          value={teksEkri.transkripsyon}
          rows={8}
          variant='outlined'
          onChange={event => handleUpdate({transkripsyon: event.target.value})}
        />
        {kiChawLang.length > 0 && kiChawLang.map(k => (
          <FormControl key={k} fullWidth style={{marginBlock: 10}}>
            <InputLabel htmlFor={`tradiksyon-${k}`}>
              <span dangerouslySetInnerHTML={{__html: textLabels[k].emoji}} /> {textLabels[k].title}
            </InputLabel>
            <OutlinedInput
              multiline
              style={{marginTop: '1em'}}
              id={`tradiksyon-${k}`}
              name={`tradiksyon-${k}`}
              label={`${textLabels[k].title}`}
              value={tradiksyon[k]}
              rows={8}
              endAdornment={
                <InputAdornment position='end'>
                  <RemoveTooltip
                    title='Cacher la fenêtre'
                    placement='left'
                    classes={{
                      tooltip: classes.tooltip
                    }}
                  >
                    <IconButton
                      style={{bottom: 75}}
                      aria-label='remove-tradiksyon'
                      edge='end'
                      size='large'
                      onClick={() => handleRemoveTradiksyon(k)}
                    >
                      <VisibilityOffIcon />
                    </IconButton>
                  </RemoveTooltip>
                </InputAdornment>
              }
              onChange={event => handleUpdateTradiksyon({[k]: event.target.value})}
            />
            <FormHelperText id={`tradiksyon-${k}`}>{textLabels[k].help}</FormHelperText>
          </FormControl>
        ))}
      </form>
      <AjouteTradiksyon
        showSwitch={Boolean(canAutoTranslate) && Boolean(!currentTeksId)}
        disableSwitch={tradiksyon.fr === '' || tradiksyon.en !== '' || tradiksyon.es !== '' || tradiksyon.de !== '' || tradiksyon.it !== ''}
        tradiksyonOtomatik={tradiksyonOtomatik}
        setTradiksyonOtomatik={setTradiksyonOtomatik}
        chwaLang={kiChawLang}
        setChwaLang={setKiChwalang}
      />
      <div>
        <Button
          fullWidth
          disabled={loading || teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === ''}
          style={{marginTop: 20}}
          variant='contained'
          color='primary'
          onClick={handleClick}
        >
          <Typography style={{fontWeight: 'bold'}}>
            Valider
          </Typography>
        </Button>
        <Button
          fullWidth
          disabled={loading || (teksEkri.awtis === '' && teksEkri.tit === '' && teksEkri.transkripsyon === '')}
          style={{marginTop: 20}}
          variant='contained'
          color='secondary'
          onClick={handleReset}
        >
          <Typography style={{fontWeight: 'bold'}}>
            Tout effacer
          </Typography>
        </Button>
        {loading && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
      </div>
      {success && (
        <Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
          <Alert severity='success' onClose={handleClose}>
            <strong>{success}</strong>
          </Alert>
        </Snackbar>
      )}
      {error && (
        <Snackbar open={open} autoHideDuration={10_000} onClose={handleClose}>
          <Alert severity='error' onClose={handleClose}>
            <strong>Une erreur s’est produite</strong> : <i>{error?.error?.message}</i>
          </Alert>
        </Snackbar>
      )}
    </StyledContainer>
  )
}

EkriTeks.defaultProps = {
  selectedTeks: null,
  canAutoTranslate: null
}

EkriTeks.propTypes = {
  canAutoTranslate: PropTypes.bool,
  selectedTeks: PropTypes.object,
  setSelectedTeks: PropTypes.func.isRequired,
}

export default EkriTeks