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 { useExperiences } 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: defaultExperiences = [],

  edit = false

}) => {

  const {

    modalState,

    experiences,

    currentExperience,

    showModal,

    onAdd,

    onEdit,

    onDelete

  } = useExperiences({

    defaultExperiences

  })

  const labels = useSelector(({ intl }) => intl.labels)

  const clearModal = () => showModal(null)

  return (

    <>

      <Widget>

        <Widget.Header

          title={labels.experience}

          renderAction={() => {

            if (!edit) return null

            return (

              <IconButton onClick={() => showModal('add')}>

                <Add />

              </IconButton>

            )

          }}

        />

        <Widget.Body>

          {experiences.length ? (

            experiences.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={currentExperience}

        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