Shake

import React, { useState, useEffect } from 'react'
import { useHistory } from "react-router-dom";
import { useQuery, useMutation } from '@apollo/client'
import dayjs from 'dayjs'
import queryString from 'query-string'
import Shake from 'shake.js'

import lib from 'ui/app/lib'
import config from 'ui/app/config'

import Spinner from 'ui/app/component/Spinner'
import ModalX from './ModalX'

let shakeTimeout

const ShakeView = ({
  lng,
  loaded,
  loadedUser,
  delta,
  event:{
    card = [],
    cardOpen = null
  } ={},
  user: {
    id = null,
    userId = null,
    profile: {
      gotCardReward = false
    } = {}
  } = {}
}) => {

  let history = useHistory()
  const [modalStatus, setModalStatus] = useState(false)
  const closeModal = () => setModalStatus(false)
  const [shakeStatus, setShakeStatus] = useState(0) //0 none, 1 shaking, 2 shaked
  let parsed = queryString.parse(location.search);

  const shake = () => {
    if(shakeStatus) {
      return false
    }

    setShakeStatus(1)

    shakeTimeout = setTimeout(() => {
      setShakeStatus(2)
    }, 2000)

    setTimeout(() => {
      setShakeStatus(0)
      setModalStatus(true)
    }, 4000)
  }

  const handleShake = (e) => {
    e.preventDefault()

    shake()
  }

  const cupClass = {
    0: '',
    1: ' cup--shaking',
    2: ' cup--shaked'
  }

  useEffect(() => {
    if(userId && loaded) {
      let shared = parsed?.["shared"]
      let img = parsed?.["reward-img"]
      let name = parsed?.["reward-name"]
      if (shared == "true") {
        if(img) {
          lib.showMessage(`Bạn đã chia sẻ thành công và nhận được<br><img src="${img}" alt="" class="img-result" /><br>${name}`).then(res => {
            history.push('/lac-que')
          })
        } else {
          lib.showMessage(`Bạn đã chia sẻ thành công`)
        }
      }
    }
  }, [userId, loaded])


  useEffect(() => {
    const shakeEvent = new Shake({
      threshold: 15,
      timeout: 1000
    });

    if(loaded && loadedUser) {
      shakeEvent.start();

      window.addEventListener('shake', shake, false);
    }

    return () => {
      shakeEvent.stop();
    }
  }, [loaded, loadedUser])

  useEffect(() => {
    if(cardOpen) {
      if(dayjs().add(delta, 'ms') < dayjs(cardOpen)) {
        lib.showMessage(`Sự kiện chưa bắt đầu<br>Vui lòng chờ tới ${dayjs(cardOpen).format('DD.MM')}`).then(res => {
          history.push('/trang-chu')
        })
      }
    }
  }, [loaded, cardOpen])

  return (
    <>
      <div className={`main-content main-shake`}>
        {cardOpen && dayjs().add(delta, 'ms') >= dayjs(cardOpen) && (
          <>
            <div className="tet tet--left"><img src="/images/tet.png" alt="" /></div>
            <div className="tet tet--right"><img src="/images/tet.png" alt="" /></div>

            <h2 className="title-shake"><img src="/images/title-shake.png" alt="" /></h2>

            <div className={`cup${cupClass?.[shakeStatus]}`}>
              <span className="cup-shadow"><img src="/images/cup-shadow.png" alt="" /></span>
              <div className={`sticks`}>
                {lib.range(1, 7).map(index => (
                  <span className={`stick stick--${index}`} key={index}>
                    <img src="/images/stick.png" alt="" />
                  </span>
                ))}
              </div>
              <span className={`stick stick--single`}>
                <img src="/images/stick.png" alt="" />
              </span>
            </div>

            <div className="shake-guide"><img src="/images/shake-guide.png" alt="" /></div>
            <div className="text-center">
              <a href="#" className={`btn btn--small btn--shake${shakeStatus ? ' btn--shake--shaking' : ''}`} onClick={e => handleShake(e)}>Lắc</a>
            </div>
          </>
        )}
      </div>

      {modalStatus && (
        <ModalX
          card={card}
          userId={userId}
          gotCardReward={gotCardReward}
          modalStatus={modalStatus}
          closeModal={closeModal}
        />
      )}
    </>
  )
}

export default ShakeView