'use client'

import {useEffect} from 'react'
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid2'
import Typography from '@mui/material/Typography'
import Tooltip from '@mui/material/Tooltip'
import {useMediaQuery} from '@mui/material'
import Link from 'next/link'
import slugify from 'slugify'

import {styled} from '@mui/material/styles'
import ExplicitIcon from '@mui/icons-material/Explicit'

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

import LicenseModal from '../cc/license-modal'
import FilesDialog from '../files/files-dialog'
import EntegreMizik from './entegre-mizik'
import OkiMizik from './oki-mizik'
import DiferansDialog from './diferans-dialog'

const PREFIX = 'teks'

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

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`&.${classes.container}`]: {
    marginTop: '3em',
  },

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

  [`& .${classes.pataje}`]: {
    position: 'absolute',
    zIndex: 9999
  },

  [`& .${classes.separation}`]: {
    color: 'black',
    [theme.getColorSchemeSelector('dark')]: {
      color: 'white'
    }
  },

  '@media (max-width: 600px)': {
    marginLeft: '0',
  },

  '@media (min-width: 600px)': {
    marginLeft: '240px',
  },
}))

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 ExplicitTooltip = Tooltip

export default function Teks({parole}) {
  const isMobile = useMediaQuery('(max-width:600px)')
  const langArray = langToArray(parole)
  const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)

  useEffect(() => {
    const isBrowser = () => typeof window !== 'undefined'
    if (!isBrowser()) {
      return
    }

    window.scrollTo({top: 0, behavior: 'smooth'})
  }, [])

  return (
    <Root className={classes.container}>
      <Box sx={{textAlign: 'center', marginTop: 1}}>
        <Typography variant='h4' component='div' display='block' marginBottom={2}>
          <Typography gutterBottom color='primary' variant='h6' component='div'>
            {enhancedAliases.map(({type, value}) => {
              if (type === 'element') {
                return (
                  <Link key={value} style={{textDecoration: 'none', color: 'inherit'}} href={`/awtis/${slugify(value, {lower: true, remove: /[*#+~.()'"!:@]/g})}`}>{value}</Link>
                )
              }

              return <span key={value} className={classes.separation}>{value}</span>
            })}
          </Typography>
          <Box display='flex' justifyContent='center' alignItems='center'>
            <Typography variant='h5' component='div'>
              {parole.titre} <small>({parole?.annee})</small>
            </Typography>
            {parole.explicitLyrics && (
              <ExplicitTooltip
                title='Explicit Lyrics'
                placement='bottom'
                classes={{
                  tooltip: classes.tooltip
                }}
              >
                <ExplicitIcon style={{marginLeft: 10}} color='error' />
              </ExplicitTooltip>
            )}
          </Box>
        </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.firstname}</i>
          </Typography>
        )}
        {parole.creativeCommons && (
          <Box sx={{maxWidth: 220, margin: '0 auto', textAlign: 'center'}}>
            <LicenseModal license={parole.creativeCommons.toLowerCase()} />
          </Box>
        )}
        {parole?.files?.data && (
          <FilesDialog files={parole.files.data} />
        )}
        {(parole.okiMizikID || parole.streamAudio.length > 0 || parole.gadeEmbed) && (
          <Box sx={{textAlign: 'center'}}>
            <EntegreMizik parole={parole} isMobile={isMobile} />
          </Box>
        )}
        {parole.okiMizikID && (
          <OkiMizik id={parole.okiMizikID} parole={parole} />
        )}
        {parole?.difference?.length > 0 && (
          <DiferansDialog difference={parole.difference} />
        )}
      </Box>
      <Grid container justifyContent='center' spacing={1}>
        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
          <Box className={classes.gridText}>
            <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
              Transcription
            </Typography>
            <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
              {formatJsonString(parole.transcription)}
            </Typography>
          </Box>
        </Grid>
        {langArray.map(({title, flag, lang}) => (
          <Grid key={title} size={{xs: 12, md: 6}}>
            <Box className={classes.gridText}>
              <Typography align='center' sx={{marginBottom: '0.5em'}} 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>
            </Box>
          </Grid>
        ))}
      </Grid>
    </Root>
  )
}

Teks.propTypes = {
  parole: PropTypes.object.isRequired,
}