Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { Backdrop, IconButton } from '@mui/material'
import { Close } from '@mui/icons-material'

import { useHabitsUrls } from '@hooks'
import { useDailyLogCategories } from './use-daily-log-categories'
import { savePreferences } from '@services/habits/daily-log'
import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'
import DailyLogForm from './daily-log-form'
import DailyMediaContent from './daily-media-content'

export default function DailyLog() {
  const [show, setShow] = useState(false)
  const [dailyMediaContent, setDailyMediaContent] = useState(null)
  const mediaRef = useRef(null)
  const dispatch = useDispatch()

  const { selectEmoji, categories } = useDailyLogCategories()
  const { links } = useHabitsUrls()

  const allCategoriesSelected =
    categories.length && categories.every((cat) => cat.selected)

  const saveDailyLog = async (log) => {
    try {
      const mediaResponse = await savePreferences(
        links.link_aspect_daily_log,
        log
      )

      mediaResponse.link ? setDailyMediaContent(mediaResponse) : setShow(false)
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  }

  useEffect(() => {
    if (!allCategoriesSelected) setShow(true)
  }, [allCategoriesSelected])

  useEffect(() => {
    if (!show && !mediaRef.current?.paused) setDailyMediaContent(null)
  }, [show, mediaRef.current, setDailyMediaContent])

  return (
    <Backdrop sx={{ color: '#fff', zIndex: 1250 }} open={show}>
      <Widget styles={{ maxWidth: '800px' }}>
        <Widget.Header
          renderAction={() =>
            dailyMediaContent ? (
              <IconButton onClick={() => setShow(false)}>
                <Close />
              </IconButton>
            ) : null
          }
        />
        <Widget.Body>
          {dailyMediaContent ? (
            <DailyMediaContent
              type={dailyMediaContent.type}
              mediaUrl={dailyMediaContent.link}
              ref={mediaRef}
            />
          ) : (
            <DailyLogForm
              categories={categories}
              onSelect={selectEmoji}
              onSubmit={saveDailyLog}
            />
          )}
        </Widget.Body>
      </Widget>
    </Backdrop>
  )
}