Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { Box, IconButton, Modal } from '@mui/material';
import Carousel from 'react-slick';

import { addNotification } from '@app/redux/notification/notification.actions';
import { getSlide, markClose, markCompleted } from '@app/services/micro-learning';

import Button from '@app/components/UI/buttons/Buttons';
import Spinner from '@app/components/UI/Spinner';
import SlideCard from './slide-card';
import { NavigateNext, NavigateBefore } from '@mui/icons-material';
import CapsuleSuccessFeedback from './capsule-success-feedback';

const SlidesCarousel = ({
  show = false,
  onClose = () => null,
  slides: currentSlides = [],
  currentSlideIndex = 0,
  autoPlay = false,
  addNotification
}) => {
  const [loading, setLoading] = useState(false);
  const [slides, setSlides] = useState(currentSlides);
  const [currentSlide, setCurrentSlide] = useState(currentSlideIndex);
  const [showCompleteFeedback, setShowCompletedFeedback] = useState(false);
  const [completedFeedback, setCompletedFeedback] = useState('');

  const navigate = useNavigate();

  const handleComplete = async (url, uuid) => {
    try {
      const response = await markCompleted(url);

      if (response.link_close_capsule) {
        markClose(response?.link_close_capsule).then(() => {
          setCompletedFeedback('Felicidades has terminado una Cápsula');
          setShowCompletedFeedback(true);
        });
      }

      if (response.link_close_topic) {
        markClose(response?.link_close_topic).then((res) => {
          setCompletedFeedback('Felicidades has terminado una capsula y un Topico');
          setShowCompletedFeedback(true);
        });
      }

      const slidesClone = structuredClone(slides);
      const currentSlideIndex = slidesClone.findIndex((slide) => slide.uuid === uuid);

      const currentSlide = slidesClone[currentSlideIndex];
      currentSlide.completed = true;

      slidesClone[currentSlideIndex] = currentSlide;

      setSlides(slidesClone);

      const resMsg = response.message ?? response;

      addNotification({ style: 'success', msg: resMsg });
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message });
    }
  };

  const handleChange = async (index) => {
    const currentSlide = slides[index];
    if (!currentSlide) return;

    setLoading(true);

    getSlide(currentSlide.link_get)
      .then((slide) => {
        setSlides((prevSlides) => {
          const newSlides = [...prevSlides];
          newSlides[index] = { ...currentSlide, ...slide };
          return newSlides;
        });
      })
      .catch((error) => addNotification({ style: 'danger', msg: error.message }))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    setSlides(currentSlides);
  }, [currentSlides]);

  useEffect(() => {
    handleChange(currentSlide);
  }, [currentSlide]);

  return (
    <Modal open={show} onClose={onClose}>
      <Box
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          maxWidth: { xs: '80vw', md: '800px' },
          height: 'fit-content',
          margin: 'auto',
          '& .slick-track': {
            display: 'flex',
            alignItems: 'center'
          }
        }}
      >
        {showCompleteFeedback ? (
          <CapsuleSuccessFeedback
            text={completedFeedback}
            onConfirm={() => navigate('/microlearning')}
          />
        ) : (
          <Carousel
            infinite={false}
            arrows={true}
            dots={false}
            slidesToShow={1}
            slidesToScroll={1}
            initialSlide={currentSlideIndex}
            beforeChange={(_, newIndex) => setCurrentSlide(newIndex)}
            nextArrow={
              <IconButton>
                <NavigateNext />
              </IconButton>
            }
            prevArrow={
              <IconButton>
                <NavigateBefore />
              </IconButton>
            }
          >
            {slides.map((slide) => (
              <Box
                key={slide.uuid}
                sx={{
                  display: 'flex !important',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  margin: 'auto',
                  height: '100%'
                }}
              >
                {loading ? (
                  <Spinner />
                ) : (
                  <SlideCard
                    completed={slide.completed}
                    slide={slide}
                    autoPlay={autoPlay}
                    onComplete={() => handleComplete(slide.link_sync, slide.uuid)}
                  />
                )}

                {slide.type !== 'quiz' ? (
                  <Button
                    color='primary'
                    disabled={slide.completed}
                    onClick={() => handleComplete(slide.link_sync, slide.uuid)}
                    sx={{ width: '100%', mt: 2 }}
                  >
                    Marcar como completado
                  </Button>
                ) : null}
              </Box>
            ))}
          </Carousel>
        )}
      </Box>
    </Modal>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
};

export default connect(null, mapDispatchToProps)(SlidesCarousel);