Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useParams } from 'react-router-dom'
import { Doughnut } from 'react-chartjs-2'
import { Box, Grid, Typography } from '@mui/material'
import styled from 'styled-components'

import { useFetch } from '@hooks'

import Spinner from 'components/UI/Spinner'

const Tag = styled.span`
  display: flex;
  flex-direction: column;
  align-items: center;
  small {
    color: ${(props) => props.theme.font.color.primary};
  }
`

const ProgressPage = () => {
  const { uuid } = useParams()
  const { data, isLoading } = useFetch(`/microlearning/progress/${uuid}`, {
    capsuleTotal: 0,
    capsuleCompleted: 0,
    capsuleStarted: 0,
    capsuleToStart: 0,
    percentCompleted: 0,
    percentIncompleted: 0,
    capsuleWithReturning: 0,
    capsuleWithoutReturning: 0
  })

  const chartOptions = {
    maintainAspectRatio: true,
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    }
  }

  if (isLoading) {
    return <Spinner />
  }

  return (
    <Grid container spacing={1}>
      <Grid item xs={12} md={6}>
        <Typography variant='h1'>Cápsulas</Typography>

        <Box mx='auto' mt={2} maxWidth={400}>
          <Doughnut
            data={{
              labels: ['Completado', 'Por completar'],
              datasets: [
                {
                  data: [data?.percentCompleted, data?.percentIncompleted],
                  backgroundColor: ['#16283c99', '#36a2eb99']
                }
              ]
            }}
            options={chartOptions}
          />
        </Box>

        <Box
          display='flex'
          gap={2}
          justifyContent='center'
          alignItems='baseline'
          mt={1}
        >
          <Tag>
            <small>{data?.capsuleTotal}</small> Total
          </Tag>
          <Tag>
            <small>{data?.capsuleStarted}</small> Iniciadas
          </Tag>
          <Tag>
            <small>{data?.capsuleToStart}</small> Por realizar
          </Tag>
          <Tag>
            <small>{data?.capsuleCompleted}</small> Completadas
          </Tag>
        </Box>
      </Grid>

      <Grid item xs={12} md={6}>
        <Typography variant='h1'>Retorno</Typography>

        <Box mx='auto' mt={2} maxWidth={400}>
          <Doughnut
            data={{
              labels: ['Con retorno', 'Sin retorno'],
              datasets: [
                {
                  data: [
                    data?.capsuleWithReturning,
                    data?.capsuleWithoutReturning
                  ],
                  backgroundColor: ['#16283c99', '#36a2eb99']
                }
              ]
            }}
            options={chartOptions}
          />
        </Box>
      </Grid>
    </Grid>
  )
}

export default ProgressPage