import { Context } from '../data/Context';
import { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import {
  convertResultsToSpeedFlowchartResult,
  SpeedFlowchartResult,
} from '../data/SpeedFlowchart';
import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';

/**
 *
 * @return {JSX.Element} speed flowchart page
 */
export default function SpeedFlowchartPage() {
  const { competitionId, categoryId } = useParams();
  const { api, setTitle } = useContext(Context);

  const [loading, setLoading] = useState(true);
  const [flowchartResult, setFlowchartResult] =
    useState<SpeedFlowchartResult>();

  useEffect(() => {
    if (competitionId === undefined || categoryId === undefined) {
      return;
    }
    setTitle('');

    api.getCompetitionResults(competitionId, categoryId).then(r => {
      setTitle(
        `${r.comp_name} - ${
          r.categorys.filter(cat => cat.GrpId === categoryId)[0]?.name ?? ''
        }`,
      );

      setLoading(false);
      console.log('loading false');

      const flowchartResult = convertResultsToSpeedFlowchartResult(r);
      console.log(flowchartResult);
      setFlowchartResult(flowchartResult);
    });
  }, []);

  return (
    <>
      <Grid
        container
        spacing={2}
        direction={{ xs: 'column-reverse', md: 'row' }}
      >
        {flowchartResult?.rounds.map((round, roundKey) => (
          <Grid
            key={`flowchart-column-${roundKey}`}
            item
            xs={12}
            md={12 / flowchartResult.rounds.length}
          >
            <h3>{round.roundName}</h3>
            <Grid container spacing={2}>
              {round.pairs.map((pair, pairKey) => (
                <Grid
                  key={`flowchart-column-${roundKey}-pair-${pairKey}`}
                  item
                  xs={12}
                >
                  <Card>
                    <CardContent>
                      <Typography
                        sx={{
                          fontWeight: pair.winner === 'A' ? 'bold' : 'plain',
                        }}
                      >
                        A: {pair.laneA?.participant.firstName}{' '}
                        {pair.laneA?.participant.lastName}:{' '}
                        {pair.laneA?.result?.result}
                      </Typography>
                      <Typography
                        sx={{
                          fontWeight: pair.winner === 'B' ? 'bold' : 'plain',
                        }}
                      >
                        B: {pair.laneB?.participant.firstName}{' '}
                        {pair.laneB?.participant.lastName}:{' '}
                        {pair.laneB?.result?.result}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Grid>
        ))}

        {flowchartResult === undefined && !loading && (
          <Grid item xs={12} className={'center-children'}>
            This competition or category does not have a speed tree!
          </Grid>
        )}

        {loading &&
          new Array(5).fill(0).map((_, i) => (
            <Grid key={`flowchart-column-skeleton-${i}`} item xs={12 / 5}>
              <Skeleton height={50}></Skeleton>
            </Grid>
          ))}
      </Grid>
    </>
  );
}