import { graphql } from "gatsby";
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";
import Text, { Element, Size, Color } from "../Text";

const Tag = ({ data, pageContext }) => {
  const { tag, tagsIt } = pageContext;
  const { totalCount } = data.pagesIt;
  const collection = data.pagesIt.edges;
  const tags = tagsIt;
  let tagHeader;
  tagHeader = `${totalCount} ${
    totalCount === 1 ? "oggetto" : "oggetti"
  } nella categoria ${tag}`;

  return (
    <Layout>
      <SEO title={tagHeader} collection={collection} totalCount={totalCount} />
      <main className={styles.page}>
        <header className={styles.header}>
          <Text element={Element.H2} size={Size.H2}>
            {tag}
            <Text
              className={styles.count}
              element={Element.Span}
              size={Size.P5}
              color={Color.Faded1}
            >
              {totalCount}
            </Text>
          </Text>
        </header>
        <Grid collection={collection} />
        <Pagination pageContext={pageContext} />
      </main>
      <TagCloud tags={tags} />
    </Layout>
  );
};

export default Tag;

export const query = graphql`
  query Tag($skip: Int!, $limit: Int!, $tag: String!) {
    pagesIt: allIndexJson(
      limit: $limit
      skip: $skip
      sort: { fields: titolo, order: ASC }
      filter: { categoryIt: { in: [$tag] } }
    ) {
      totalCount
      edges {
        node {
          parent {
            ... on File {
              relativeDirectory
            }
          }
          categoryIt
          price
          titolo
        }
      }
    }
    pagesEn: allIndexJson(
      limit: $limit
      skip: $skip
      sort: { fields: titolo, order: ASC }
      filter: { categoryEn: { in: [$tag] } }
    ) {
      totalCount
      edges {
        node {
          parent {
            ... on File {
              relativeDirectory
            }
          }
          categoryEn
          price
          titolo
        }
      }
    }
  }
`;
