Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Box, Button, Typography } from '@mui/material';

import { useModal } from '@shared/hooks';
import { useCapsule } from '@microlearning/hooks';
import { parse } from '@shared/utils';

import {
  Card,
  CardActions,
  CardContent,
  CardMedia,
  CommentList,
  Spinner
} from '@shared/components';
import { CapsuleCommentForm, SlideForm } from '@microlearning/components';

export function CapsuleDetailsPage() {
  const { uuid } = useParams();
  const navigate = useNavigate();

  const { capsule, loading, addComment, removeComment } = useCapsule(uuid);

  const { showModal } = useModal();

  const showContent = () => {
    if (!capsule?.slides?.length) return;
    if (capsule?.slides?.length > 1 || capsule?.slides[0]?.type !== 'video') {
      return navigate(`/microlearning/capsules/${uuid}`);
    }
    const firstSlide = capsule.slides[0];
    showModal(firstSlide.name, <SlideForm uuid={firstSlide.uuid} autoPlay />);
  };

  if (loading || !capsule) return <Spinner />;

  return (
    <Card>
      <CardMedia
        src={capsule.image}
        alt={`${capsule.name} capsule`}
        sx={{
          aspectRatio: 1 / 0.5,
          objectFit: 'contain',
          objectPosition: 'center'
        }}
      />
      <CardContent>
        <Typography variant='h1'>{capsule.name}</Typography>
        <Typography>{parse(capsule.description)}</Typography>
        {capsule?.slides?.length > 0 && (
          <Button
            variant='contained'
            color='primary'
            onClick={showContent}
            style={{ marginTop: 1, width: '100%' }}
          >
            Ver contenido
          </Button>
        )}
      </CardContent>

      <CardActions>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
          <CapsuleCommentForm onSubmit={addComment} />
          <CommentList comments={capsule.comments} onDelete={removeComment} />
        </Box>
      </CardActions>
    </Card>
  );
}