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'

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