import React, { useState, useEffect, useContext } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { translate } from 'cozy-ui/react/I18n'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
import { ChallengeType, UserChallenge } from 'services/dataChallengeContracts'
import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import ChallengeManager from 'services/challengeDataManagerService'
import { Client, withClient } from 'cozy-client'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import { ScreenType } from 'enum/screen.enum'
import AvailableChallengeIcon from 'assets/png/badges/available-big.png'

interface AvailableChallengeDetailsViewProps {
  location: any
  props: any
  client: Client
  t: Function
}

const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetailsViewProps> = (
  props: AvailableChallengeDetailsViewProps
) => {
  const t = props.t
  const client = props.client
  const challengeManager = new ChallengeManager(client)
  const { refreshCurrentChallenge, screenType } = useContext(AppContext)
  const [redirect, setRedirect] = useState(false)
  const [challenge, setChallenge] = useState<ChallengeType | null>(null)
  const [userChallenge, setUserChallenge] = useState<UserChallenge | null>(null)
  const [headerHeight, setHeaderHeight] = useState<number>(0)

  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

  async function startChallenge() {
    if (challenge) {
      const data = await challengeManager.startChallenge(
        challenge,
        [0, 1, 2],
        challenge.availableEcogestures
      )
      const chal = await challengeManager.getCurrentChallenge()
      await setUserChallenge(chal)
      await refreshCurrentChallenge()
    }
  }

  async function handleStartClick() {
    await startChallenge()
    setRedirect(true)
  }

  const renderRedirect = () => {
    if (redirect) {
      return (
        <Redirect
          to={{
            pathname: '/challenges/ongoing',
            state: { challenge: userChallenge },
          }}
        />
      )
    }
  }

  useEffect(() => {
    if (props.location.state) {
      setChallenge(props && props.location.state.challenge)
    }
  }, [])

  return (
    <React.Fragment>
      <CozyBar
        titleKey={'COMMON.APP_NEW_CHALLENGE_TITLE'}
        displayBackArrow={true}
      />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'COMMON.APP_NEW_CHALLENGE_TITLE'}
        displayBackArrow={true}
      ></Header>
      {!props.location.state ? <Redirect to="/challenges" /> : null}
      <Content height={headerHeight} background="var(--darkLight2)">
        {!challenge ? (
          <StyledSpinner />
        ) : (
          <>
            <div className="cp-root --available">
              <div className="cp-content">
                <div className="cp-info --available">
                  <div className="cp-title text-22-bold">{challenge.title}</div>
                  <img
                    className="cp-icon"
                    src={AvailableChallengeIcon}
                    width={screenType === ScreenType.MOBILE ? 180 : 300}
                  ></img>
                  <div className="cp-description text-16-bold">
                    {challenge.description}
                  </div>
                  <div className="cp-valid">
                    <div className="cp-left-button">
                      <StyledButtonValid
                        color="secondary"
                        onClick={() => history.goBack()}
                      >
                        {t('CHALLENGE.NOT_NOW')}
                      </StyledButtonValid>
                    </div>
                    <div className="cp-right-button">
                      <StyledButtonValid
                        color="primary"
                        onClick={handleStartClick}
                      >
                        {t('CHALLENGE.START')}
                        {renderRedirect()}
                      </StyledButtonValid>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}
      </Content>
    </React.Fragment>
  )
}

export default translate()(withClient(AvailableChallengeDetailsViewContainer))