// Copyright (c) 2021, Marcelo Jorge Vieira
// Licensed under the BSD 3-Clause License

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import {
  Button,
  Card,
  CardActions,
  CardActionArea,
  CardContent,
  CardHeader,
  Grid,
  Typography,
} from "@material-ui/core";

import GitlabLintHttpClient from "../GitlabLintHttpClient";
import Loading from "../Loading";
import levelsStyles from "../theme";

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  title: {
    color: theme.palette.secondary.contrastText,
  },
  ...levelsStyles,
}));

const Rules = () => {
  const classes = useStyles();
  const [rows, setData] = useState({});
  const fetchData = () => {
    GitlabLintHttpClient("GET_ALL", { entity: "rules" })
      .then((data) => {
        setData(data.data);
      })
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (Object.keys(rows).length === 0 && rows.constructor === Object) {
    return <Loading />;
  }

  return (
    <React.Fragment>
      <Typography variant="h4" paragraph>
        Rules
      </Typography>

      <Grid container spacing={4}>
        {rows.map((row) => {
          return (
            <Grid item key={row.ruleId} xs={12} sm={6} md={4}>
              <Card className={classes.root}>
                <CardActionArea component={Link} to={`rules/${row.ruleId}`}>
                  <CardHeader
                    className={classes[row.level]}
                    classes={{ title: classes["title"] }}
                    title={row.level}
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      {row.name}
                    </Typography>
                    {row.description && (
                      <Typography
                        variant="body2"
                        color="textSecondary"
                        component="p"
                      >
                        {row.description}
                      </Typography>
                    )}
                  </CardContent>
                </CardActionArea>
                <CardActions>
                  <Button
                    component={Link}
                    size="small"
                    color="secondary"
                    to={`/rules/${row.ruleId}`}
                  >
                    Show projects
                  </Button>
                </CardActions>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </React.Fragment>
  );
};

export default Rules;