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>

  )

}