import React, { useState } from "react";
import { createUseStyles } from "react-jss";
import { useCookies } from "react-cookie";
import { Navbar } from "../components/navbar";
import { MDDivider, MDCard, MDCardSection } from "react-md-components";
import { isEmpty } from "lodash";

const useStyles = createUseStyles({
  nav: {
    marginTop: ".5rem",
    marginBottom: ".5rem",
    padding: "8px",
    width: "calc(100vw - 16px)",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))"
  },
  page: {
    width: "90%",
    marginLeft: "5%",
    marginRight: "5%",
    display: "flex",
    flexDirection: "column"
  },
  list: {
    maxWidth: "650px",
    marginLeft: "auto",
    marginRight: "auto",
    display: "grid",
    gridRowGap: ".5rem",
    gridTemplateColumns: "1fr",
    marginBottom: "1em"
  },
  article: {
    cursor: "pointer"
  }
});
let i = 0;
const Index = props => {
  const styles = useStyles();
  const [cookies] = useCookies(["token", "uid"]);
  const [list, setList] = useState([]);
  const [authors, setAuthors] = useState([]);
  const [fetched, setFetched] = useState(false);
  const [offset, setOffset] = useState(0);
  if (!fetched)
    fetch(`/api/article/fetchlatest?offset=${offset}`)
      .then(res => res.json())
      .then(res => {
        console.log([...res]);
        setList([...res]);
        console.log(list);
        setFetched(true);
        setOffset(offset + 10);
      });
  else if (fetched && i < list.length) {
    const elem = list.splice(i, i + 1)[0];
    if (!isEmpty(elem)) {
      fetch(`/api/user/public/${elem.author}`)
        .then(res => res.json())
        .then(res =>
          authors.includes(res) ? null : setAuthors([...authors, res])
        );
    }
    i++;
  } else {
    console.log(`${i} to ${list.length}`);
  }
  let keylist = 0;
  return (
    <>
      <Navbar />
      <MDDivider />
      <div className={styles.page}>
        <div className={styles.list}>
          {list.map(elem => {
            let media = "";
            let authorname = "";
            try {
              media = JSON.parse(elem.body).blocks.filter(
                elem => elem.type == "image"
              )[0].data.file.url;
            } catch (error) {}
            try {
              authorname =
                authors.filter(author => author._id == elem.author)[0].name +
                " " +
                authors.filter(author => author._id == elem.author)[0].surname;
            } catch (error) {}
            return (
              <MDCard
                key={keylist++}
                subtitle={authorname != "" ? `Di ${authorname}` : null}
                title={elem.title}
                media={media}
                className={styles.article}
                onClick={() => (window.location.href = `/view/${elem._id}`)}
              >
                <MDCardSection>
                  {JSON.parse(elem.body)
                    .blocks.filter(elem => elem.type == "paragraph")[0]
                    .data.text.substring(0, 120)
                    .replace(/&nbsp;/g, " ")
                    .replace(/<br>/g, "\n")}
                </MDCardSection>
              </MDCard>
            );
          })}
        </div>
      </div>
    </>
  );
};
export default Index;