FollowChallengeTimeline.tsx

import React, { useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { UserChallenge } from 'services/dataChallengeContracts'
import { DateTime, Interval } from 'luxon'
import { FluidType } from 'enum/fluid.enum'
import ChallengeManager from 'services/challengeDataManagerService'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { Client } from 'cozy-client'

interface FollowChallengeTimelineViewProps {
  challenge: UserChallenge
  client: Client
}

const FollowChallengeTimeline: React.FC<FollowChallengeTimelineViewProps> = ({
  challenge,
  client,
}: FollowChallengeTimelineViewProps) => {
  const { fluidTypes } = useContext(AppContext)
  const challengeManager = new ChallengeManager(client)

  const viewingDate = () => {
    if (challenge && challenge.challengeType) {
      const startingDate = challenge.startingDate
      return startingDate.plus({
        days: challengeManager.getLagDays(fluidTypes),
      })
    } else {
      return DateTime.local()
    }
  }

  const getListOfDays = () => {
    if (challenge && challenge.challengeType) {
      const startingDate = DateTime.fromISO(challenge.startingDate.toString())
      const listOfChallengeDays = []
      let i = 0
      if (challenge.challengeType.duration.days === 7) {
        while (challenge.challengeType.duration.days > i) {
          listOfChallengeDays.push({
            letter: startingDate
              .plus({ days: i })
              .weekdayShort[0].toUpperCase(),
            date: startingDate.plus({ days: i }).day,
          })
          i++
        }
      } else {
        while (challenge.challengeType.duration.days >= i) {
          listOfChallengeDays.push({
            letter: '',
            date: startingDate.plus({ days: i }).toFormat('dd/MM'),
          })
          i += 7
        }
      }
      return listOfChallengeDays
    } else {
      return []
    }
  }

  const getListOfWeeks = () => {
    if (challenge && challenge.challengeType) {
      const startingDate = DateTime.fromISO(challenge.startingDate.toString())
      const listOfChallengeDays = []
      let i = 0
      while (challenge.challengeType.duration.days >= i) {
        listOfChallengeDays.push({
          letter: '',
          date: startingDate.plus({ days: i }).toFormat('dd/MM'),
        })
        i += 7
      }
      return listOfChallengeDays
    } else {
      return []
    }
  }

  const getListOfPastDays = () => {
    if (Interval.fromDateTimes(viewingDate(), DateTime.local()).isValid) {
      if (challenge && challenge.challengeType) {
        return Interval.fromDateTimes(viewingDate(), DateTime.local()).count(
          'days'
        )
      } else {
        return 0
      }
    } else {
      if (challenge) {
        return -Interval.fromDateTimes(DateTime.local(), viewingDate()).count(
          'days'
        )
      } else {
        return 0
      }
    }
  }

  const generateDayDash = (index: number, dayCount: number) => {
    return (
      <div
        className={`date-dash ${
          (index === 0 && dayCount > 0) ||
          (index === getListOfWeeks().length - 1 && dayCount < 0)
            ? 'none'
            : index * 7 < getListOfPastDays() + dayCount
            ? 'past'
            : 'futur'
        }`}
      ></div>
    )
  }

  const monthChallenge = () => {
    return getListOfWeeks().map((day, index) => (
      <div key={index} className="day-solo">
        <div className="day-line-label">
          {generateDayDash(index, 3)}
          {generateDayDash(index, 2)}
          {generateDayDash(index, 1)}
          <div
            className={`date-label ${
              index * 7 < getListOfPastDays() ? 'past' : 'futur'
            }`}
          ></div>
          {generateDayDash(index, -1)}
          {generateDayDash(index, -2)}
          {generateDayDash(index, -3)}
        </div>
        <div className="day-letter">{day.letter}</div>
        <div className="day-date">{day.date}</div>
      </div>
    ))
  }

  const weekChallenge = () => {
    return getListOfDays().map((day, index) => (
      <div key={index} className="day-solo">
        <div className="day-line-label">
          <div
            className={`date-dash ${
              index < getListOfPastDays() ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-label ${
              index < getListOfPastDays() ? 'past' : 'futur'
            }`}
          ></div>
          <div
            className={`date-dash ${
              index + 1 < getListOfPastDays() ? 'past' : 'futur'
            }`}
          ></div>
        </div>
        <div className="day-letter">{day.letter}</div>
        <div className="day-date">{day.date}</div>
      </div>
    ))
  }

  return (
    <React.Fragment>
      <div className="list-of-days-duration">
        {challenge &&
        challenge.challengeType &&
        challenge.challengeType.duration.days === 7
          ? weekChallenge()
          : monthChallenge()}
      </div>
    </React.Fragment>
  )
}

export default translate()(FollowChallengeTimeline)