Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useSelector } from 'react-redux'
import { IconButton } from '@mui/material'
import { Add } from '@mui/icons-material'

import {
  addExperience,
  deleteExperience,
  editExperience
} from '@services/profile/experience'
import { useResource } from '@hooks'

import Widget from '@components/UI/Widget'
import ExperienceItem from './experience-item'
import ExperienceModal from './experience-modal'
import ConfirmModal from '@components/modals/ConfirmModal'
import EmptySection from '@components/UI/EmptySection'

const ExperiencesCard = ({ uuid = '', experiences = [], edit = false }) => {
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    showModal,
    modalState,
    onAdd,
    onEdit,
    onDelete,
    resources,
    clearModal,
    currentResource
  } = useResource({
    defaultResources: experiences,
    addResource: addExperience,
    editResource: editExperience,
    deleteResource: deleteExperience
  })

  return (
    <>
      <Widget>
        <Widget.Header
          title={labels.experience}
          renderAction={() => {
            if (!edit) return null
            return (
              <IconButton onClick={() => showModal('add')}>
                <Add />
              </IconButton>
            )
          }}
        />

        <Widget.Body>
          {resources.length ? (
            resources.map((experience, index) => (
              <ExperienceItem
                key={index}
                experience={experience}
                onEdit={() => showModal('edit', experience)}
                onDelete={() => showModal('delete', experience)}
                edit={edit}
              />
            ))
          ) : (
            <EmptySection align='left' message={labels.datatable_empty} />
          )}
        </Widget.Body>
      </Widget>

      <ExperienceModal
        show={modalState === 'add' || modalState === 'edit'}
        currentExperience={currentResource}
        onClose={clearModal}
        onConfirm={(experience) =>
          modalState === 'add' ? onAdd(uuid, experience) : onEdit(experience)
        }
      />

      <ConfirmModal
        show={modalState === 'delete'}
        title='Eliminar Experiencia'
        message='¿Esta seguro de eliminar esta experiencia?'
        onClose={clearModal}
        onAccept={onDelete}
      />
    </>
  )
}

export default ExperiencesCard