SingleEcogestureView.tsx

import { Collapse } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
import doingEnabledIcon from 'assets/icons/ico/doing-enabled.svg'
import objectiveDisabledIcon from 'assets/icons/ico/objective-disabled.svg'
import objectiveEnabledIcon from 'assets/icons/ico/objective-enabled.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import ErrorPage from 'components/CommonKit/ErrorPage/ErrorPage'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import useExploration from 'components/Hooks/useExploration'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
import { useAppSelector } from 'store/hooks'
import { importIconById } from 'utils/utils'
import EfficiencyRating from './EfficiencyRating/EfficiencyRating'
import './singleEcogestureView.scss'

const SingleEcogestureView = () => {
  const { t } = useI18n()
  const client = useClient()
  const [ecogesture, setEcogesture] = useState<Ecogesture>()
  const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
  const [showDetails, setShowDetails] = useState<boolean>(false)
  const [isDoing, setIsDoing] = useState<boolean>(false)
  const [isObjective, setIsObjective] = useState<boolean>(false)
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const { ecogestureID } = useParams<{ ecogestureID: string }>()

  const ecogestureService = useMemo(
    () => new EcogestureService(client),
    [client]
  )
  const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [, setValidExploration] = useExploration()

  const updateEcogesture = useCallback(
    async (objective, doing) => {
      if (ecogesture) {
        const updates: Ecogesture = {
          ...ecogesture,
          objective: objective,
          doing: doing,
        }
        const result = await ecogestureService.updateEcogesture(updates)
        if (result) {
          setIsObjective(result.objective)
          setIsDoing(result.doing)
          setEcogesture(result)
        }
      }
    },
    [ecogesture, ecogestureService]
  )

  const toggleObjective = useCallback(() => {
    updateEcogesture(!isObjective, false)
  }, [isObjective, updateEcogesture])

  const toggleDoing = useCallback(() => {
    updateEcogesture(false, !isDoing)
  }, [isDoing, updateEcogesture])

  useEffect(() => {
    let subscribed = true
    async function getSingleEcogesture() {
      const data = await ecogestureService.getEcogesturesByIds([
        ecogestureID || '',
      ])
      if (subscribed) {
        if (data?.[0]) {
          setEcogesture(data[0])
          // Prevent case this key doesn't exist in doctype
          setIsObjective(data[0].objective)
          setIsDoing(data[0].doing)
          const icon = await importIconById(data[0].id, 'ecogesture')
          if (subscribed) {
            setEcogestureIcon(icon || defaultIcon)
            if (currentChallenge?.exploration.ecogesture_id === data[0]._id) {
              setValidExploration(currentChallenge.exploration.id)
            }
          }
        }
        setIsLoading(false)
      }
    }
    getSingleEcogesture()

    return () => {
      subscribed = false
    }
  }, [
    client,
    currentChallenge,
    ecogestureID,
    ecogestureService,
    setValidExploration,
  ])

  return (
    <>
      <CozyBar titleKey="common.title_ecogesture" displayBackArrow={true} />
      <Header
        setHeaderHeight={setHeaderHeight}
        desktopTitleKey="common.title_ecogesture"
        displayBackArrow={true}
      />
      <Content heightOffset={headerHeight}>
        {isLoading && (
          <div className="loaderContainer">
            <Loader />
          </div>
        )}
        {!isLoading && !ecogesture && (
          <ErrorPage
            text={t('error_page.no_ecogesture')}
            returnPage="ecogestures"
          />
        )}
        {!isLoading && ecogesture && (
          <div className="single-ecogesture">
            <div className="icon-container">
              {ecogestureIcon && (
                <StyledIcon
                  className="icon-big"
                  icon={ecogestureIcon}
                  size={220}
                />
              )}
            </div>
            <div className="details">
              <div className="text-22 title">{ecogesture.shortName}</div>
              <div className="efficiency">
                <span className="text text-14-normal">
                  {t('ecogesture_modal.efficiency')}
                </span>
                <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
              </div>
            </div>
            <div className="styled-container">
              <div className="long-name text-18-bold">
                {ecogesture.longName}
              </div>
              <div
                className="showMore text-15-normal"
                onClick={() => setShowDetails(prev => !prev)}
                role="button"
              >
                {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
              </div>

              <Collapse in={showDetails}>
                <div className="longDescription text-16-normal-150">
                  {ecogesture.longDescription}
                </div>
              </Collapse>
            </div>

            <div className="buttons-selection">
              <IconButton
                aria-label={t('ecogesture.objective')}
                onClick={toggleObjective}
                classes={{
                  root: `btn-secondary-negative objective-btn ${
                    isObjective && 'active'
                  }`,
                  label: 'text-15-normal',
                }}
              >
                <Icon
                  className="status-icon"
                  icon={
                    isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
                  }
                  size={40}
                />
                <span>{t('ecogesture.objective')}</span>
              </IconButton>
              <IconButton
                aria-label={t('ecogesture.doing')}
                onClick={toggleDoing}
                classes={{
                  root: `btn-secondary-negative doing-btn ${
                    isDoing && 'active'
                  }`,
                  label: 'text-15-normal',
                }}
              >
                <Icon
                  className="status-icon"
                  icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
                  size={40}
                />
                <span>{t('ecogesture.doing')}</span>
              </IconButton>
            </div>
          </div>
        )}
      </Content>
    </>
  )
}

export default SingleEcogestureView