import { Project } from "../generated/graphql";
import React, { FC, Fragment } from "react";
import {
  IconButton,
  Grid,
  makeStyles,
  Paper,
  Portal,
  Typography,
  Box,
} from "@material-ui/core";
import { useHeaderContainer } from "../layouts";
import { PipelineList } from "../pipelines/pipeline-list";
import { Edit } from '@material-ui/icons';
import { Link } from '@curi/react-dom';
import { Button } from "@material-ui/core";
import { AddBox } from "@material-ui/icons";

interface Props {
  project: Project;
}

const useStyles = makeStyles(() => ({
  root: {
    height: "100%",
    flex: "auto",
    overflow: "hidden"
  },
  pipelineListContainer: {
    height: "100%",
    width: "100%",
    overflow: "auto"
  },
}));

export const ProjectDetail: FC<Props> = ({ project, children }) => {
  const headerContainer = useHeaderContainer();

  const classes = useStyles();

  return (
    <Fragment>
      <Portal container={headerContainer}>
        <Grid
          container
          spacing={3}
          direction="row"
          justify="space-between"
          alignItems="center"
        >
          <Grid item>
            <Typography component="h1" variant="h6" noWrap>
              {project.name}
            </Typography>
            <Typography variant="subtitle2" gutterBottom noWrap>
              {project.comment}
            </Typography>
          </Grid>
          <Grid item>
            <Link name="edit-project" params={{ projectId: project.id }}>
              <IconButton color="inherit">{<Edit />}</IconButton>
            </Link>
          </Grid>
        </Grid>
      </Portal>
      <Grid
        container
        spacing={0}
        direction="row"
        alignItems="stretch"
        className={classes.root}
      >
        <Grid item xs={3} lg={2} style={{ height: "100%", display: "flex" }}>
          <Paper className={classes.pipelineListContainer}>
            <Box m={2}>
              <Link name="create-pipeline" params={{ projectId: project.id }}>
                <Button
                  variant="contained"
                  color="primary"
                  title="New Pipeline"
                  startIcon={<AddBox />}
                >
                  New Pipeline
                </Button>
              </Link>
            </Box>
            <PipelineList projectId={project.id} />
          </Paper>
        </Grid>
        <Grid
          item
          xs={9}
          lg={10}
          style={{ height: "100%", display: "flex", overflowY: "auto" }}
        >
          {children}
        </Grid>
      </Grid>
    </Fragment>
  );
};