import {Box, IconButton, Typography} from '@material-ui/core'
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'

import {
  Tidal,
  Spotify,
  Deezer,
  Soundcloud
} from '@icons-pack/react-simple-icons'
import {useEffect, useState} from 'react'

const kouteyAchteyIcons = {
  Tidal: <Tidal />,
  Deezer: <Deezer />,
  Spotify: <Spotify />,
  Soundcloud: <Soundcloud />
}

function RannIframe({boutik, url, isMobile}) {
  let src = ''
  if (boutik === 'Tidal') {
    const trackArray = url.split('/')
    const trackId = trackArray[trackArray.length - 1]
    src = `https://embed.tidal.com/tracks/${trackId}?disableAnalytics=true`
  } else if (boutik === 'Deezer') {
    const trackArray = url.split('/')
    const trackId = trackArray[trackArray.length - 1]
    src = `https://widget.deezer.com/widget/auto/track/${trackId}?tracklist=false`
  } else if (boutik === 'Spotify') {
    const trackArray = url.split('/')
    const trackId = trackArray[trackArray.length - 1]
    src = `https://open.spotify.com/embed/track/${trackId}`
  } else if (boutik === 'Soundcloud') {
    src = `https://w.soundcloud.com/player/?url=${url}`
  }

  return (
    <div style={{marginTop: 5}}>
      {boutik === 'Tidal' && (
        <iframe
          src={src}
          allowFullScreen='allowfullscreen'
          frameBorder='0'
          width={`${isMobile ? '100%' : '50%'}`}
          height='96px'
        />
      )}

      {boutik === 'Deezer' && (
        <iframe
          title='deezer-widget'
          frameBorder='0'
          src={src}
          allow='encrypted-media; clipboard-write'
          allowtransparency='true'
        />
      )}

      {boutik === 'Spotify' && (
        <iframe
          src={src}
          width={`${isMobile ? '100%' : '50%'}`}
          height='80'
          frameBorder='0'
          allowtransparency='true'
          allow='encrypted-media'
        />
      )}

      {boutik === 'Soundcloud' && (
        <iframe
          src={src}
          width={`${isMobile ? '100%' : '50%'}`}
          height='166'
          scrolling='no'
          frameBorder='no'
        />
      )}

    </div>
  )
}

function EntegreMizik({anTeks, isMobile}) {
  const [chwaMizik, meteChwaMizik] = useState(null)
  const router = useRouter()
  const {kouteyAchtey, slug, okiMizikID} = anTeks
  const filteredKouteyAchtey = kouteyAchtey.filter(({boutik}) => boutik === 'Tidal' || boutik === 'Spotify' || boutik === 'Deezer' || boutik === 'Soundcloud')

  const handleClick = (boutik, url) => {
    if (chwaMizik && chwaMizik.boutik === boutik) {
      return meteChwaMizik(null)
    }

    meteChwaMizik({boutik, url})
  }

  useEffect(() => {
    if (router.asPath === `/teks/${slug}` || router.asPath === `/teks/${slug}#${slug}`) {
      meteChwaMizik(null)
    }
  }, [router, slug])

  return (
    <Box align='center'>
      <Typography variant='overline' display='block'>
        Écouter
      </Typography>

      {!okiMizikID && filteredKouteyAchtey.map(({_id, boutik, url}) => {
        return (
          <IconButton key={_id} aria-label='player' onClick={() => handleClick(boutik, url)}>
            {kouteyAchteyIcons[boutik]}
          </IconButton>
        )
      })}

      {chwaMizik && (
        <RannIframe boutik={chwaMizik.boutik} url={chwaMizik.url} isMobile={isMobile} />
      )}
    </Box>
  )
}

EntegreMizik.propTypes = {
  anTeks: PropTypes.object.isRequired,
  isMobile: PropTypes.bool.isRequired
}

RannIframe.propTypes = {
  boutik: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  isMobile: PropTypes.bool.isRequired
}

export default EntegreMizik