'use client'

import {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
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 ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'

import Image from 'next/image'

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

import LicenseModal from '../cc/license-modal'
import FilesDialog from '../files/files-dialog'
import StemsDialog from '../files/stems-dialog'
import {StreamButton} from '../streaming-buttons'
import EntegreMizik from './entegre-mizik'
import OkiMizik from './oki-mizik'
import DiferansDialog from './diferans-dialog'

const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'

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.applyStyles('dark', {
      color: 'white'
    })
  },

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

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

const LANG_NAMES = {
  fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano',
  pt: 'Português', ja: '日本語', ko: '한국어',
}

const TRAD_FIELDS = [
  {field: 'anglais', title: 'English'},
  {field: 'francais', title: 'Français'},
  {field: 'espagnol', title: 'Español'},
  {field: 'allemand', title: 'Deutsch'},
  {field: 'italien', title: 'Italiano'},
  {field: 'portugais', title: 'Português'},
  {field: 'japonais', title: '日本語'},
  {field: 'coreen', title: '한국어'},
]

const langToArray = parole => {
  if (!parole || !parole.traductions) {
    return []
  }

  return TRAD_FIELDS
    .filter(({field}) => parole.traductions[field])
    .map(({field, title}) => ({title, lang: parole.traductions[field]}))
}

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)
  const coverFmt = formatKuveti(parole.couverture)
  const [tab, setTab] = useState(0)

  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: 12}}>
        <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>

        {coverFmt?.url && (
          <Box sx={{display: 'flex', justifyContent: 'center', mb: 2}}>
            <Image
              src={new URL(coverFmt.url, IMAGE_URL).toString()}
              alt={parole.titre}
              width={coverFmt.width || 300}
              height={coverFmt.height || 300}
              style={{maxWidth: '100%', maxHeight: 320, width: 'auto', height: 'auto', borderRadius: 8}}
            />
          </Box>
        )}
        {parole?.user && (
          <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
            <i>parole soumise par {parole.user.username}</i>
          </Typography>
        )}
        {parole?.userAdmin&& !parole.user && (
          <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
            <i>parole soumise par {parole.userAdmin.firstname}</i>
          </Typography>
        )}
        {parole.creativeCommons && (
          <Box sx={{maxWidth: 220, margin: '0 auto', textAlign: 'center'}}>
            <LicenseModal license={parole.creativeCommons.toLowerCase()} sourceOriginale={parole.sourceOriginale ?? null} remixes={parole.remixes?.length ? parole.remixes : null} />
          </Box>
        )}
        {(parole?.files || (parole.creativeCommons && parole.stems?.length > 0)) && (
          <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
            {parole?.files && (
              <FilesDialog files={parole.files} />
            )}
            {parole.creativeCommons && parole.stems?.length > 0 && (
              <StemsDialog stems={parole.stems} />
            )}
          </Box>
        )}
        {(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} />
        )}
        {parole.streamAudio?.length > 0 && (
          <Box sx={{mt: 2, mb: 1}}>
            <Typography variant='overline' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
              Écouter sur
            </Typography>
            <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
              {parole.streamAudio.map((lyen, i) => (
                <StreamButton key={i} lyen={lyen} />
              ))}
            </Box>
          </Box>
        )}
      </Box>
      <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
        <Tabs
          value={tab}
          onChange={(event, value) => setTab(value)}
          variant='scrollable'
          scrollButtons
          allowScrollButtonsMobile
          centered={langArray.length === 0}
          slots={{
            StartScrollButtonIcon: ArrowBackIosNewIcon,
            EndScrollButtonIcon: ArrowForwardIosIcon
          }}
          sx={{
            borderBottom: 1,
            borderColor: 'divider',
            mb: 2,
            '& .MuiTabs-scrollButtons': {
              width: 36,
              height: 36,
              borderRadius: '50%',
              color: 'primary.main',
              backgroundColor: 'action.hover',
              mx: 0.5,
              '&.Mui-disabled': {
                opacity: 0
              }
            }
          }}
        >
          <Tab label='Transcription' />
          {langArray.map(({title}) => (
            <Tab key={title} label={title} />
          ))}
        </Tabs>
        {tab === 0 && (
          <>
            {parole.langueSource && parole.langueSource !== 'ka' && (
              <Typography align='center' variant='body2' color='text.secondary' sx={{mb: 1}}>
                ({LANG_NAMES[parole.langueSource]})
              </Typography>
            )}
            <Typography paragraph='true' align={isMobile ? 'justify' : 'center'} component='span'>
              {formatJsonString(parole.transcription)}
            </Typography>
          </>
        )}
        {langArray.map(({title, lang}, index) => (
          tab === index + 1 && (
            <Typography key={title} paragraph='true' align='justify' component='span'>
              {formatJsonString(lang)}
            </Typography>
          )
        ))}
      </Box>
    </Root>
  )
}

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