Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Typography } from '@mui/material'

import { useHabitProgress } from '@hooks'
import { deleteProgress } from '@services/habits/habits'
import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'
import Options from '@components/UI/Option'
import ConfirmModal from '@components/modals/ConfirmModal'

export default function ProgressItem({ progress }) {
  const [show, setShow] = useState(false)
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const { id, date, quantitative_value, qualitative_description, actions } =
    progress

  const { removeItem, getItemById } = useHabitProgress()
  const currentRegister = getItemById(id)

  const formatDate = useMemo(() => {
    const intlDate = new Intl.DateTimeFormat('es', {
      dateStyle: 'full',
      timeStyle: 'medium',
      timeZone: 'America/Bogota'
    }).format(new Date(date))
    return intlDate
  }, [date])

  const toggleConfirmModal = () => setShow(!show)

  const handleDelete = async () => {
    try {
      const response = await deleteProgress(
        currentRegister?.actions.link_delete
      )
      dispatch(addNotification({ style: 'success', msg: response }))
      removeItem(id)
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  }

  return (
    <>
      <Widget>
        <Widget.Header
          title={formatDate}
          subheader={quantitative_value}
          renderAction={() => (
            <Options>
              {actions.link_edit && (
                <Options.Item onClick={() => navigate(`edit/${id}`)}>
                  Editar
                </Options.Item>
              )}
              {actions.link_delete && (
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
              )}
            </Options>
          )}
        />

        <Widget.Body>
          <Typography>{qualitative_description}</Typography>
        </Widget.Body>
      </Widget>
      <ConfirmModal
        show={show}
        title='Borrar'
        message='¿Estás seguro de que deseas borrar este registro?'
        onAccept={handleDelete}
        onClose={toggleConfirmModal}
      />
    </>
  )
}