import { useState } from 'react'
import Codepen from 'react-codepen-embed'
import redirect from '../../utils/redirect'
import FunctionPage from '../../components/FunctionPage/FunctionPage'
import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
import Loader from '../../components/Loader'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons'
import api from '../../utils/api'
import '../../public/css/pages/FunctionComponent.css'
import '../../public/css/pages/functions/chronometerTimer.css'

let interval
function convertSeconds (seconds) {
  return {
    minutes: Math.floor(seconds / 60),
    seconds: seconds % 60
  }
}

const Chronometer = () => {
  const [timeLength, setTimeLength] = useState(0) // seconds
  const [isPlaying, setIsPlaying] = useState(false)

  const handlePlayPause = () => {
    if (isPlaying) {
      clearInterval(interval)
    } else {
      if (interval) clearInterval(interval)
      interval = setInterval(() => {
        setTimeLength((time) => time + 1)
      }, 1000)
    }
    setIsPlaying(!isPlaying)
  }

  const handleReset = () => {
    if (interval) clearInterval(interval)
    setIsPlaying(false)
    setTimeLength(0)
  }

  const getFormattedValue = () => {
    const minutesAndSeconds = convertSeconds(timeLength)
    const minutes = (minutesAndSeconds.minutes < 100) ? (('0' + minutesAndSeconds.minutes).slice(-2)) : minutesAndSeconds.minutes
    const seconds = ('0' + minutesAndSeconds.seconds).slice(-2)
    return `${minutes}:${seconds}`
  }

  return (
    <div className='container-fluid'>
      <div className='row justify-content-center'>
        <div className='col-sm-24 col-md-12'>
          <div className='Chronometer__container'>
            <div className='Chronometer__item'>
              <div className='Chronomter__row'>
                <div className='Chronometer__time-left'>
                  {getFormattedValue()}
                </div>
              </div>
            </div>

            <div className='Chronometer__item Chronometer__buttons'>
              <div className='Chronomter__row Chronometer__row-button'>
                <button onClick={handlePlayPause} className='Chronometer-btn'>
                  <FontAwesomeIcon {...(isPlaying) ? { icon: faPause } : { icon: faPlay }} />
                </button>
                <button onClick={handleReset} className='Chronometer-btn' title='Remettre à zéro ?'>
                  <FontAwesomeIcon icon={faSync} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const Pomodoro = () => {
  return (
    <div style={{ marginBottom: '50px' }} className='container-fluid'>
      <Codepen hash='vYEbPoB' user='Divlo' height={800} defaultTab='result' preview={false} loader={() => <Loader />} />
    </div>
  )
}

const FunctionTabManager = (props) => {
  return (
    <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
      <div className='FunctionComponent__slide'>
        <Chronometer />
      </div>
      <div className='FunctionComponent__slide'>
        <Pomodoro />
      </div>
      <div className='FunctionComponent__slide'>
        <FunctionArticle article={props.article} />
      </div>
      <div className='FunctionComponent__slide'>
        <FunctionComments functionId={props.id} />
      </div>
    </FunctionTabs>
  )
}

const chronometerTimer = (props) => (
  <FunctionPage
    FunctionTabManager={FunctionTabManager}
    {...props}
    tabNames={['⏰ Chronomètre', '⌛ Pomodoro', '📝 Article', '📬 Commentaires']}
  />
)

export async function getServerSideProps (context) {
  return api.get('/functions/chronometerTimer')
    .then((response) => ({ props: response.data }))
    .catch(() => redirect(context, '/404'))
}

export default chronometerTimer