Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { Button, styled, Tab, Tabs } from '@mui/material';

import { useCapsule } from '@microlearning/hooks';

import { CommentForm, CommentsList, Spinner } from '@shared/components';
import CapsuleDetails from '@microlearning/components/CapsuleDetails';

const Picture = styled('img')`
  width: 100%;
  height: 250px;
  border-radius: 10px;
  background-color: #858585;
  margin-bottom: 1rem;
`;

export function CapsulePage() {
  const [section, setSection] = useState('');
  const { uuid } = useParams();

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

  /* const getSlides = async () => {
    try {
      const slides = await getSlide(capsule.link_first_slide);
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message });
    }
  };

  const handleStart = async () => {
    capsule?.total_slides === 1 && capsule?.type_first_slide === 'video'
      ? getSlides()
      : navigate('slides');
  }; */

  const handleChange = (event, newValue) => {
    setSection(newValue);
  };

  if (loading) return <Spinner />;

  return (
    <>
      <Picture src={capsule.image} alt={`${capsule.name} capsule`} />

      <Tabs value={section} onChange={handleChange}>
        <Tab label='Información' value='details' />
        <Tab label='Contenido' value='comments' />
        <Tab label='Contenido' value='comment' />
      </Tabs>

      {section === 'details' && <CapsuleDetails />}

      {section === 'comments' && <CommentsList comments={capsule.comments} />}

      {section === 'comment' && <CommentForm />}

      <Button color='primary'>Comenzar</Button>
    </>
  );
}