import { gql, useQuery } from "@apollo/client";
import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from "@material-ui/core";
import React, { FC } from "react";
import { Article } from '../generated/graphql';

const articles = gql`
query Articles {
  articles {
    id
    title
    publishedAt
  }
}`;

export const ArticleIndex: FC = () => {
  const { data } = useQuery<{
    articles: Article[];
  }>(articles, {});

  return (
    <section>
      <TableContainer component={Paper}>
        <Table aria-label="articles table">
          <TableHead>
            <TableRow>
              <TableCell>Article Title</TableCell>
              <TableCell>Published At</TableCell>
              <TableCell>Views</TableCell>
              <TableCell>Comments</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data?.articles.map((article) => (
              <TableRow key={article.id}>
                <TableCell component="th" scope="row">
                  {article.title}
                </TableCell>
                <TableCell align="right">{article.publishedAt}</TableCell>
                <TableCell align="right"> -- </TableCell>
                <TableCell align="right"> -- </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </section>
  );
};