import React from 'react';
import { Link } from 'react-router-dom';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import { CheckCircleOutline, ErrorOutlineOutlined, PendingOutlined } from '@mui/icons-material';

const intl = {
  es: {
    'not-available': 'Este contenido no está disponible actualmente en español.',
    'not-started': 'Reto sin iniciar',
    'completed': 'Reto terminado',
    'results': ({ stats, total }) => `${stats.passes} de ${total} requerimientos completados`,
    'in-progress': 'Reto en proceso',
  },
  pt: {
    'not-available': 'Este conteúdo não está disponível atualmente em português.',
    'not-started': 'Desafio não iniciado',
    'completed': 'Desafio concluído',
    'results': ({ stats, total }) => `${stats.passes} de ${total} requisitos preenchidos`,
    'in-progress': 'Desafio em processo',
  },
};

const sx = {
  '& .MuiButtonBase-root': {
    display: 'flex',
    flexDirection: { xs: 'column', sm: 'row' },
    alignItems: 'start',
  },
  '& .MuiTypography-textStatus': {
    fontSize: '.875rem',
    fontWeight: '600',
    textTransform: 'uppercase',
    svg: { marginRight: 1 },
    maxWidth: 'max-content',
    height: 'max-content',
    padding: 1,
    display: 'flex',
    alignItems: 'center',
    borderRadius: 2,
  },
  '& .MuiBox-root': {
    display: 'flex',
    flexDirection: 'column',
    alignItems: { xs: 'start', sm: 'end' },
    p: 1,
    marginBottom: {
      xs: 3,
      sm: 0,
    },
  },
};

const Challenges = ({ basedir, lang, challenges }) => {
  return (
    <List>
      {challenges.map(challenge => {
        const testResults = challenge.lastActivityLog?.data?.testResults;
        const title = challenge.intl[lang]?.title || intl[lang]['not-available'];
        return (
          <ListItem
            sx={sx}
            key={challenge.slug}
            disablePadding
          >
            <ListItemButton
              component={Link}
              to={basedir ? `${basedir}/${challenge.slug}` : challenge.slug}
            >
              <ListItemText primary={title} />
              <Box>
                {!testResults && (
                  <Typography
                    variant="textStatus"
                    sx={{
                      backgroundColor: '#F2F2F2',
                      color: '#000000',
                    }}>
                    <PendingOutlined />
                    {intl[lang]['not-started']}
                  </Typography>
                )}
                {testResults?.failures === 0 && (
                  <Typography
                    variant="textStatus"
                    sx={{
                      backgroundColor: '#DFEFD3',
                      color: '#08822FF',
                    }}>
                    <CheckCircleOutline />
                    {intl[lang].completed}
                  </Typography>
                )}
                {testResults?.failures > 0 && (
                  <Typography
                    variant="textStatus"
                    sx={{
                      backgroundColor: '#FFF6B6',
                      color: '#9E7C03',
                    }}>
                    <ErrorOutlineOutlined />
                    {intl[lang]['in-progress']}
                  </Typography>
                )}
                {testResults && challenge.env !== 'form' && (
                  <Typography>
                    {intl[lang].results(testResults)}
                  </Typography>
                )}
              </Box>
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
};

export default Challenges;