import { useState } from 'react'
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 api from '../../utils/api'
import '../../public/css/pages/FunctionComponent.css'
import '../../public/css/pages/functions/rightPrice.css'

const PlayRightPrice = () => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [productToGuess, setProductToGuess] = useState({})
  const [isLoadingProduct, setIsLoadingProduct] = useState(false)
  const [enteredPrice, setEnteredPrice] = useState('')
  const [attemptsArray, setAttemptsArray] = useState([])

  const handlePlaying = () => {
    setIsPlaying(true)
    setAttemptsArray([])
    fetchRandomAmazonProduct()
  }

  const fetchRandomAmazonProduct = async () => {
    setIsLoadingProduct(true)
    const { data } = await api.post('/functions/rightPrice')
    setProductToGuess(data)
    setIsLoadingProduct(false)
  }

  const handleChange = event => {
    setEnteredPrice(event.target.value)
  }

  const handleSubmit = async event => {
    event.preventDefault()
    const objectTry = {}
    const guessedPrice = Number(enteredPrice.replace(',', '.').replace(' ', ''))
    if (!isNaN(guessedPrice)) {
      objectTry.guessedPrice = guessedPrice
      objectTry.numberTry = attemptsArray.length + 1
      if (guessedPrice > productToGuess.price) {
        objectTry.message = "C'est moins !"
      } else if (guessedPrice < productToGuess.price) {
        objectTry.message = "C'est plus !"
      } else {
        objectTry.message = 'Bravo, vous avez trouvé le juste prix !'
      }
      setAttemptsArray([objectTry, ...attemptsArray])
    }
    setEnteredPrice('')
  }

  return (
    <div className='container-fluid'>
      {!isPlaying ? (
        <div className='row justify-content-center'>
          <div className='form-group text-center'>
            <button
              onClick={handlePlaying}
              type='submit'
              className='btn btn-dark'
            >
              Jouer
            </button>
          </div>
        </div>
      ) : isLoadingProduct ? (
        <div className='row justify-content-center'>
          <Loader />
        </div>
      ) : (
        <>
          <div className='row justify-content-center'>
            <div
              style={{ marginBottom: '20px' }}
              className='col-24 text-center'
            >
              <h4>{productToGuess.name}</h4>
              <img
                src={productToGuess.image}
                alt={productToGuess.name}
                className='Product__image'
              />
            </div>
          </div>

          <div className='row justify-content-center'>
            <div style={{ marginBottom: '25px' }} className='col-24'>
              {attemptsArray.length > 0 &&
              attemptsArray[0].message ===
                'Bravo, vous avez trouvé le juste prix !' ? (
                  <div className='form-group text-center'>
                    <button
                      onClick={handlePlaying}
                      type='submit'
                      className='btn btn-dark'
                    >
                    Rejouer ?
                    </button>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit}>
                    <div className='text-center'>
                      <input
                        value={enteredPrice}
                        onChange={handleChange}
                        name='enteredPrice'
                        id='enteredPrice'
                        type='number'
                        step='0.01'
                        className='form-control'
                        autoComplete='off'
                        placeholder='Devinez le prix (prix à virgule possible!)'
                      />
                    </div>

                    <div className='form-group text-center'>
                      <button type='submit' className='btn btn-dark'>
                      Deviner
                      </button>
                    </div>
                  </form>
                )}
            </div>
          </div>

          <div
            style={{ marginBottom: '30px' }}
            className='row justify-content-center'
          >
            {attemptsArray.map((attempt, index) => {
              const { message } = attempt
              let priceResultClass
              if (message === "C'est moins !") {
                priceResultClass = 'Price__result-moins'
              } else if (message === "C'est plus !") {
                priceResultClass = 'Price__result-plus'
              } else {
                priceResultClass = 'Price__result-success'
              }
              return (
                <div
                  key={index}
                  className={`col-24 Price__result ${priceResultClass}`}
                >
                  # {attempt.numberTry} ({attempt.guessedPrice}) {message}
                </div>
              )
            })}
          </div>
        </>
      )}
    </div>
  )
}

const FunctionTabManager = props => {
  return (
    <FunctionTabs
      setSlideIndex={props.setSlideIndex}
      slideIndex={props.slideIndex}
    >
      <div style={{ marginTop: '10px' }}>
        <PlayRightPrice />
      </div>
      <div className='FunctionComponent__slide'>
        <FunctionArticle article={props.article} />
      </div>
      <div className='FunctionComponent__slide'>
        <FunctionComments functionId={props.id} />
      </div>
    </FunctionTabs>
  )
}

const rightPrice = props => (
  <FunctionPage
    FunctionTabManager={FunctionTabManager}
    {...props}
    tabNames={['🕹️ Jouer', '📝 Article', '📬 Commentaires']}
  />
)

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

export default rightPrice