Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { Typography } from '@mui/material';
import { CheckCircle } from '@mui/icons-material';

import { TopicContainer, TopicsGrid } from './UI';
import EmptySection from '../../../components/UI/EmptySection';
import SlidesCarousel from './slides/slides-carousel';

const Slides = ({ capsuleId = '' }) => {
  const [showCarousel, setShowCarousel] = useState(false);
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

  const slides = useSelector(({ microlearning }) =>
    microlearning.slidesAllIds
      .map((uuid) => microlearning.slideById[uuid])
      .sort((a, b) => a.order - b.order)
  );
  const labels = useSelector(({ intl }) => intl.labels);

  const filteredSlides = useMemo(() => {
    if (!capsuleId) {
      return slides;
    }

    return slides.filter((capsule) => capsule.capsuleId === capsuleId);
  }, [capsuleId, slides]);

  if (!filteredSlides.length) {
    return <EmptySection message={labels.datatable_szerorecords} />;
  }

  const handleShowCarousel = (index = 0) => {
    setCurrentSlideIndex(index);
    setShowCarousel(true);
  };

  const handleHideCarousel = () => {
    setCurrentSlideIndex(0);
    setShowCarousel(false);
  };

  return (
    <TopicsGrid>
      {filteredSlides.map((slide, index) => (
        <SlidesItem key={slide.uuid} slide={slide} onClick={() => handleShowCarousel(index)} />
      ))}
      <SlidesCarousel
        onClose={handleHideCarousel}
        slides={filteredSlides}
        show={showCarousel}
        currentSlideIndex={currentSlideIndex}
      />
    </TopicsGrid>
  );
};

const SlidesItem = ({ slide, onClick }) => {
  const { name, background, file, completed } = slide;

  return (
    <TopicContainer onClick={onClick} style={{ cursor: 'pointer' }}>
      <div className='c-header'>
        <Typography variant='h3' title={name}>
          {name}
        </Typography>
      </div>
      <div className='c-body'>
        {completed ? <CheckCircle color='success' /> : null}
        <img src={background || file} alt='' />
      </div>
    </TopicContainer>
  );
};

export default Slides;