Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Button, styled } from '@mui/material';
import { CheckCircle } from '@mui/icons-material';
import parse from 'html-react-parser';

import { axios } from '@app/utils';
import { addNotification } from '@app/redux/notification/notification.actions';
import { useFetch } from '@hooks';

import { FILE_TYPE_LABELS } from '@app/constants/files';
import { Card, PageHeader, Spinner } from '@shared/components';

const Slide = styled(Card)`
  margin: auto;
  width: fit-content;
  svg {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  img,
  video {
    max-width: 400px;
    max-height: 400px;
    object-fit: contain;
  }
  button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
  }
`;

export function SlideViewPage() {
  const { uuid } = useParams();
  const dispatch = useDispatch();
  const { data: slide, isLoading, mutate } = useFetch(`/microlearning/get-slide/${uuid}`, {});
  const [displayFile, setDisplayFile] = useState(false);
  const navigate = useNavigate();

  const closeParent = async (url = '') => {
    const response = await axios.post(url);
    const { data, success } = response.data;

    if (!success) {
      const errorMessage =
        typeof data === 'string'
          ? data
          : Object.entries(data)
              .map(([key, value]) => `${key}: ${value}`)
              .join(', ');
      throw new Error(errorMessage);
    }

    const resMsg = data.message ?? data;
    dispatch(addNotification({ style: 'success', msg: resMsg }));
  };

  const markCompleted = async () => {
    try {
      const response = await axios.post(slide?.link_sync);
      const { data, success } = response.data;

      if (!success) {
        const errorMessage =
          typeof data === 'string'
            ? data
            : Object.entries(data)
                .map(([key, value]) => `${key}: ${value}`)
                .join(', ');
        throw new Error(errorMessage);
      }

      if (data.link_close_capsule) {
        await closeParent(data?.link_close_capsule);
        navigate('/microlearning');
      }

      if (data.link_close_topic) {
        await closeParent(data?.link_close_topic);
      }

      const resMsg = data.message ?? data;
      dispatch(addNotification({ style: 'success', msg: resMsg }));
      mutate({ ...slide, completed: 1 });
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    } finally {
      setDisplayFile(false);
    }
  };

  const renderFile = (type = 'video') => {
    switch (type) {
      case 'video': {
        return (
          <>
            {displayFile ? (
              <video controls controlsList='nodownload' onEnded={markCompleted}>
                <source src={slide?.file} />
              </video>
            ) : (
              <>
                <img src={slide?.background} alt={slide?.name} />
                <Button color='primary' onClick={() => setDisplayFile(!displayFile)}>
                  {FILE_TYPE_LABELS[slide?.type]}
                </Button>
              </>
            )}
          </>
        );
      }

      case 'image': {
        return <img src={slide?.file} alt={slide?.name} />;
      }

      case 'audio': {
        return (
          <>
            {displayFile ? (
              <audio controls src={slide?.file} alt={slide?.name} onEnded={markCompleted} />
            ) : (
              <>
                <img src={slide?.background} alt={slide?.name} />
                <Button color='primary' onClick={() => setDisplayFile(!displayFile)}>
                  {FILE_TYPE_LABELS[slide?.type]}
                </Button>
              </>
            )}
          </>
        );
      }

      case 'text': {
        return parse(slide?.description);
      }

      case 'document': {
        return (
          <a href={slide?.file} target='_blank' rel='noreferrer'>
            <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
          </a>
        );
      }

      default:
        return (
          <>
            {displayFile ? (
              <video controls controlsList='nodownload' onEnded={markCompleted}>
                <source src={slide?.file} />
              </video>
            ) : (
              <>
                <img src={slide?.background} alt={slide?.name} />
                <Button color='primary' onClick={() => setDisplayFile(!displayFile)}>
                  {FILE_TYPE_LABELS[slide?.type]}
                </Button>
              </>
            )}
          </>
        );
    }
  };

  if (isLoading) {
    return <Spinner />;
  }

  return (
    <>
      <PageHeader title={slide?.name} goBack />
      <Slide>
        {slide?.completed && !displayFile ? <CheckCircle color='success' /> : null}
        {renderFile(slide?.type)}
      </Slide>

      <Button
        color='primary'
        disabled={slide?.completed}
        onClick={() => markCompleted()}
        sx={{ width: '100%', mt: 2 }}
      >
        Marcar como completado
      </Button>
    </>
  );
}