{"size": 2233, "ext": "js", "max_stars_repo_path": "src/components/careText.js", "max_stars_repo_name": "ndjamenamarmon/jamena.dev", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/careText.js", "max_issues_repo_name": "ndjamenamarmon/jamena.dev", "max_issues_repo_issues_event_min_datetime": "2020-10-20T22:00:45.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T15:29:07.000Z", "max_forks_repo_path": "src/components/careText.js", "max_forks_repo_name": "ndjamenamarmon/jamena.dev", "max_forks_repo_forks_event_min_datetime": "2021-01-12T21:19:36.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-12T21:19:36.000Z"}
{"max_stars_count": null, "max_issues_count": 8, "max_forks_count": 1, "avg_line_length": 25.0898876404, "max_line_length": 77, "alphanum_fraction": 0.6108374384}
// import PropTypes from "prop-types"
import React, { useState, useEffect } from "react"
import styled from "styled-components"

const StyledCareText = styled.span`
  /* border-bottom: 2px solid ${props => props.theme.colors.primaryLight}; */
  background-image: linear-gradient(to right, ${props =>
    props.theme.colors.primaryLight} 50%, ${props =>
  props.theme.colors.primaryLight} 50%);
  background-position: 0 .9em;
  background-size: 2em .8em;
  background-repeat: repeat-x;
`

const CareText = () => {
  const careArr = [
    "excellent user experiences",
    "accessibility and inclusion",
    "clear, efficient code",
    "teamwork and communication",
    "performance and security",
    "lifelong learning",
  ]
  const [careIndex, setCareIndex] = useState(0)
  const [careChanged, setCareChanged] = useState(false)
  const [displayCare, setDisplayCare] = useState(careArr[careIndex])

  let i = 0
  let speed = 50

  const callType = cI => {
    i = 0
    type(cI)
  }

  const type = cI => {
    if (i < careArr[careIndex].length) {
      setDisplayCare(prevValue => {
        return prevValue
          ? (prevValue += careArr[careIndex].charAt(i))
          : careArr[careIndex].charAt(i - 1)
      })
      i++
      setTimeout(type, speed)
    }
  }

  const callUntype = cI => {
    i = careArr[cI].length - 1
    speed = Math.floor(500 / careArr[cI].length)
    untype(cI)
  }

  const untype = () => {
    if (i < careArr[careIndex].length && i >= -1) {
      setDisplayCare(prevValue => {
        return prevValue.substring(0, prevValue.length - 1)
      })
      i = i - 1
      setTimeout(untype, speed)
    }
  }

  useEffect(() => {
    let i = 0
    const interval = setInterval(() => {
      callUntype(careIndex)
      setTimeout(() => {
        setCareIndex(prevIndex =>
          prevIndex < careArr.length - 1 ? prevIndex + 1 : 0
        )
        setCareChanged(true)
      }, 1000)
      i++
      if (i === careArr.length * 3 - 1) clearInterval(interval)
    }, 6000)

    return () => clearInterval(interval)
  }, [])

  useEffect(() => {
    if (careChanged) callType(careIndex)
  }, [careIndex, careChanged])

  return <StyledCareText>{displayCare}</StyledCareText>
}

export default CareText
