import { graphql } from "gatsby";
import { IPageContext } from "../../types";
import { useSiteMetadata } from "../../hooks/use-site-metadata";
import * as styles from "./styles.module.scss";
import Grid from "../Grid";
import Layout from "../Layout";
import Pagination from "../Pagination";
import React from "react";
import SEO from "../Seo";
import TagCloud from "../TagCloud";

interface IProps {
  data: any;
  pageContext: IPageContext;
}

const Collection = ({ data, pageContext }: IProps) => {
  const { siteMetadata } = useSiteMetadata();
  const { tagsIt } = pageContext;
  const { totalCount } = data.collection;
  const collection = data ? data.collection.edges : [];
  const tags = tagsIt;

  return (
    <Layout>
      <SEO
        title={siteMetadata.title}
        collection={collection}
        totalCount={totalCount}
      />
      <main className={styles.collection}>
        <div className={styles.pagePadding}>
          <div className={styles.feed}>
            <Grid collection={collection} />
            <Pagination pageContext={pageContext} />
          </div>
        </div>
      </main>
      <TagCloud tags={tags} />
    </Layout>
  );
};

export default Collection;

export const query = graphql`
  query Collezione($skip: Int!, $limit: Int!) {
    collection: allIndexJson(limit: $limit, skip: $skip) {
      edges {
        node {
          parent {
            ... on File {
              relativeDirectory
            }
          }
          categoryEn
          categoryIt
          price
          titolo
        }
      }
    }
  }
`;
