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 Tópico');

          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);