Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { Box, styled } from '@mui/material'

import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'
import { useFetch } from '@hooks'

import Widget from '@app/components/UI/Widget'
import Spinner from '@app/components/UI/Spinner'

const EmojisList = styled('div')(({ theme }) => ({
  display: 'flex',
  gap: theme.spacing(0.5),
  justifyContent: 'center',
  padding: theme.spacing(0.5, 0)
}))

const EmojiItem = styled('button')`
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 300ms;
  & > img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  &:hover {
    transform: translateY(-5px);
  }
`

const DailyPulse = ({ dailyPulseUrl = '' }) => {
  const { data, refetch } = useFetch(dailyPulseUrl)
  const {
    emojis_how_are_you_feel: emojisHowAreYouFeel = [],
    emojis_climate_on_your_organization: emojisClimateOrganization
  } = data || {}
  const completed =
    emojisHowAreYouFeel.length === 1 && emojisClimateOrganization.length === 1

  if (completed) {
    return null
  }

  return (
    <Widget>
      <Widget.Header title='Pulso Diario' />

      <Widget.Body
        styles={{ textAlign: 'center', '& h4': { fontWeight: 400 } }}
      >
        <Emojis
          title='¿Como te sientes hoy?'
          options={emojisHowAreYouFeel}
          onComplete={refetch}
        />
        <Emojis
          title='¿Como esta el clima en la organización?'
          options={emojisClimateOrganization}
          onComplete={refetch}
        />
      </Widget.Body>
    </Widget>
  )
}

const Emojis = ({ options = [], title = '', onComplete = () => null }) => {
  const [isLoading, setIsLoading] = useState(false)
  const dispatch = useDispatch()

  const handleEmojiSave = (url) => {
    if (!url) return
    setIsLoading(true)

    axios
      .post(url)
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Ha ocurrido un error'
          throw new Error(errorMessage)
        }

        onComplete()
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
      .finally(() => setIsLoading(false))
  }

  return (
    <>
      <h4>{title}</h4>
      <EmojisList>
        {options.map(({ link_save, id, image }, index) => (
          <EmojiItem onClick={() => handleEmojiSave(link_save)} key={id}>
            <img
              className='fadedown'
              src={image}
              style={{ animationDelay: `${index + 10}00ms` }}
            />
          </EmojiItem>
        ))}
      </EmojisList>
      {isLoading && (
        <Box
          sx={{
            position: 'absolute !important',
            top: '50%',
            left: '50%',
            margin: 0,
            transform: 'translate(-50%, -50%)',
            zIndex: 100
          }}
        >
          <Spinner />
        </Box>
      )}
    </>
  )
}

export default DailyPulse