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

import React, { useState, useEffect, useCallback } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Link as RouterLink, useParams } from "react-router-dom";

import {
  Box,
  Breadcrumbs,
  Divider,
  Link,
  List,
  ListItem,
  ListItemText,
  Typography,
} from "@material-ui/core";

import GitlabLintHttpClient from "../GitlabLintHttpClient";
import Loading from "../Loading";
import RuleTitle from "./RuleTitle";

const useStyles = makeStyles((theme) => ({
  ruleDescription: {
    alignItems: "center",
    backgroundColor: theme.palette.background.default,
    color: theme.palette.secondary.main,
    border: `1px solid ${theme.palette.secondary.main}`,
    display: "flex",
    padding: 16,
    whiteSpace: "pre-wrap",
  },
}));

const RuleProjects = ({ projects }) => {
  if (projects.length <= 0) {
    return <p>Found no projects matching the criteria.</p>;
  }

  return (
    <React.Fragment>
      <Typography variant="h6" paragraph>
        These {projects.length} repositories in the gitlab trigger this rule:
      </Typography>
      <List>
        {projects.map((row) => {
          return (
            <ListItem
              key={row.projectId}
              button
              component={RouterLink}
              to={`/projects/${row.projectId}`}
            >
              <ListItemText primary={row.pathWithNamespace} />
            </ListItem>
          );
        })}
      </List>
    </React.Fragment>
  );
};

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

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

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

  return (
    <React.Fragment>
      <Breadcrumbs aria-label="breadcrumb">
        <Link component={RouterLink} color="inherit" to="/rules">
          Rules
        </Link>
        <Typography color="textPrimary">{rows.rule.ruleId}</Typography>
      </Breadcrumbs>
      <Box pt={2} pb={2}>
        <Divider />
      </Box>
      <RuleTitle rule={rows.rule} />
      {rows.rule.description && (
        <p className={classes.ruleDescription}>{rows.rule.description}</p>
      )}
      <Box pt={2} pb={2}>
        <Divider />
      </Box>
      <RuleProjects projects={rows.projects} />
    </React.Fragment>
  );
};

export default Rule;