import { graphql } from "gatsby";
import { useEmailLink } from "../../hooks/use-email-link";
import { usePiwik } from "../../hooks/use-piwik";
import { usePrettify } from "../../hooks/use-prettify";
import { useSiteMetadata } from "../../hooks/use-site-metadata";
import * as styles from "./styles.module.scss";
import Layout from "../Layout";
import LinkUnderline from "../LinkUnderline";
import NonStretchedImage from "../NonStretchedImage";
import React, { useEffect } from "react";
import SEO from "../Seo";
import SimilarItems from "../SimilarItems";
import TagCloud from "../TagCloud";
import Tags from "../Tags";
import Text, { Element, Size, Measure } from "../Text";

const Opera = ({ data, pageContext }) => {
  const { siteMetadata } = useSiteMetadata();
  const { tagsIt } = pageContext;
  const page = data ? data.page.edges[0].node : [];
  const galleryOpera = data.galleryOpera.edges || [];
  const titolo = usePrettify(page.titolo);
  const emailLink = useEmailLink(titolo, page.parent.relativeDirectory);
  const categories = page.categoryIt;
  const tags = tagsIt;
  let showSimilarItems = siteMetadata.addSimilarItemsOnBuild;

  useEffect(() => {
    showSimilarItems = true;
  });

  return (
    <Layout>
      <SEO
        page={page}
        title={titolo}
        galleryOpera={galleryOpera}
        isOpera={true}
      />
      <article className={styles.opera}>
        <div className={styles.top}>
          <div className={styles.topImage}>
            {galleryOpera.length > 0 && (
              <NonStretchedImage
                fluid={galleryOpera[0].node.childImageSharp.fluid}
                alt={`${titolo} immagine 1`}
              />
            )}
          </div>

          <div className={styles.pdp}>
            <Text
              className={styles.title}
              element={Element.H2}
              size={Size.H3}
              measure={Measure.Narrow}
            >
              {titolo}
            </Text>
            <Tags tags={categories} className={styles.tags} size={Size.Tag2} />
            <Text
              className={styles.value}
              element={Element.P}
              size={Size.Eyebrow3}
            >
              <span className={styles.estimate}>Valore stimato —</span>
              <span className={styles.price}>€{page.price}</span>
            </Text>
            <Text className={styles.contact} element={Element.P} size={Size.P4}>
              Per informazioni su questo oggetto
              {` `}
              <a
                href={emailLink}
                onClick={() => usePiwik(["trackEvent", "Contatti", titolo])}
              >
                <LinkUnderline>contattami</LinkUnderline>
              </a>
              .
            </Text>
          </div>
        </div>
        <section
          className={styles.description}
          dangerouslySetInnerHTML={{ __html: page.descrizionePulita }}
        />
        <section className={styles.images}>
          {galleryOpera.map((image, key) => (
            <div className={styles.image} key={key}>
              {image.node.childImageSharp && (
                <NonStretchedImage
                  fluid={image.node.childImageSharp.fluid}
                  alt={`${titolo} immagine ${key}`}
                />
              )}
            </div>
          ))}
        </section>
      </article>
      {showSimilarItems ? (
        <SimilarItems tags={categories} titolo={page.titolo} />
      ) : (
        <div></div>
      )}
      <TagCloud tags={tags} />
    </Layout>
  );
};

export default Opera;

export const query = graphql`
  query FindOpera($titolo: String!, $relativeDirectory: String!) {
    page: allIndexJson(filter: { titolo: { eq: $titolo } }) {
      edges {
        node {
          parent {
            ... on File {
              relativeDirectory
            }
          }
          categoryEn
          categoryIt
          descrizionePulita
          price
          titolo
        }
      }
    }
    galleryOpera: allFile(
      filter: {
        relativeDirectory: { eq: $relativeDirectory }
        extension: { in: ["jpg", "jpeg", "gif", "png"] }
      }
    ) {
      edges {
        node {
          relativeDirectory
          childImageSharp {
            fluid(
              sizes: "(orientation: portrait) 90vw, (orientation: landscape) 90vw, (orientation: landscape) and (min-width: 970px) 80vw"
            ) {
              aspectRatio
              base64
              presentationHeight
              presentationWidth
              sizes
              src
              srcSet
            }
          }
        }
      }
    }
  }
`;
