import { GalleryContext, FaviconContext } from "../Layout";
import { ISchema } from "../../types";
import { usePrettify } from "../../hooks/use-prettify";
import { usePriceValidUntil } from "../../hooks/use-price-valid-until";
import { useSiteMetadata } from "../../hooks/use-site-metadata";
import Helmet from "react-helmet";
import React, { useContext } from "react";

interface IProps {
  collection?: any;
  isContact?: boolean;
  isOpera?: boolean;
  keywords?: [];
  galleryOpera?: any;
  page?: any;
  title: string;
}

function SEO({
  collection,
  isContact,
  isOpera,
  keywords,
  galleryOpera,
  page,
  title
}: IProps) {
  const favicon = useContext(FaviconContext);
  const galleryAll = useContext(GalleryContext);
  const { siteMetadata } = useSiteMetadata();
  const siteUrl = siteMetadata.siteUrl;
  const siteTitle = siteMetadata.title;
  const author = siteMetadata.author;
  const siteKeywords = siteMetadata.keywordsIt;
  const pageKeywords = keywords || siteKeywords;
  const themeColor = siteMetadata.themeColor;
  const section = "Antichità";
  let description = siteMetadata.description;
  let catalog;
  let list;
  let pageTitle = title;
  let pageUrl;
  let price;
  let priceValidUntil = usePriceValidUntil();
  let schemaGallery;
  let thumb = {
    src: favicon ? favicon.src : "",
    width: favicon ? favicon.width : "",
    height: favicon ? favicon.height : ""
  };
  let totalCount;

  const generateOfferCatalog = item => {
    const image = galleryAll.find(
      element =>
        element.relativeDirectory === item.node.parent.relativeDirectory
    );
    if (image) {
      thumb = image.fluid;
    }
    return {
      "@type": "Offer",
      itemOffered: {
        "@type": "Product",
        name: usePrettify(item.node.titolo),
        description: item.descrizioneAlgolia,
        url: `/${item.node.titolo}`,
        image: thumb.src
      },
      url: `/${item.node.titolo}`,
      priceCurrency: "EUR",
      price: item.node.price,
      itemCondition: "https://schema.org/UsedCondition",
      availability: "https://schema.org/LimitedAvailability",
      priceValidUntil: priceValidUntil
    };
  };

  const generateListItem = (item, key) => {
    const image = galleryAll.find(
      element =>
        element.relativeDirectory === item.node.parent.relativeDirectory
    );
    if (image) {
      thumb = image.fluid;
    }
    return {
      "@type": "ListItem",
      position: key,
      item: {
        "@type": "Product",
        name: usePrettify(item.node.titolo),
        description: item.descrizioneAlgolia,
        image: thumb.src,
        url: `/${item.node.titolo}`,
        offers: {
          "@type": "Offer",
          price: item.node.price,
          priceCurrency: "EUR",
          itemCondition: "https://schema.org/UsedCondition",
          availability: "https://schema.org/LimitedAvailability",
          priceValidUntil: priceValidUntil
        }
      }
    };
  };

  // TODO: add schema for index
  const schemaOrgJSONLD: ISchema[] = [
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      url: pageUrl,
      name: pageTitle,
      alternateName: siteTitle
    }
  ];

  if (collection) {
    catalog = collection.map(item => generateOfferCatalog(item));
    list = collection.map((item, key) => generateListItem(item, key));
    schemaOrgJSONLD.push({
      "@context": "https://schema.org/",
      "@type": "ItemList",
      numberOfItems: totalCount,
      name: pageTitle,
      description: description,
      itemListElement: list,
      hasOfferCatalog: {
        "@type": "OfferCatalog",
        name: pageTitle,
        itemListElement: catalog
      }
    });
  }

  if (isOpera) {
    description = page.descrizioneAlgolia;
    pageTitle = usePrettify(page.titolo);
    pageUrl = `/${page.titolo}`;
    price = page.price;
    schemaGallery = galleryOpera.map(
      image => image.node.childImageSharp.fluid.src
    );
    if (galleryOpera.length > 0) {
      const firstImage = galleryOpera[0].node.childImageSharp.fluid;
      thumb = {
        src: firstImage.src || "",
        width: firstImage.presentationWidth || "",
        height: firstImage.presentationHeight || ""
      };
    }
    schemaOrgJSONLD.push({
      "@context": "https://schema.org/",
      "@type": "Product",
      name: pageTitle,
      image: schemaGallery,
      description: description,
      offers: {
        "@type": "Offer",
        url: pageUrl,
        priceCurrency: "EUR",
        price: price,
        itemCondition: "https://schema.org/UsedCondition",
        availability: "https://schema.org/LimitedAvailability",
        priceValidUntil: priceValidUntil
      }
    });
  }

  if (isContact) {
    schemaOrgJSONLD.push({
      "@context": "https://schema.org/",
      "@type": "ContactPage",
      name: pageTitle,
      description: description
    });
  }

  return (
    <Helmet>
      Schema.org tags
      <script type="application/ld+json">
        {JSON.stringify(schemaOrgJSONLD)}
      </script>
      <html lang="it" />
      <link rel="manifest" href="/manifest.webmanifest" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <meta itemprop="description" content={description} />
      <meta itemprop="image" content={thumb.src} />
      <meta itemprop="name" content={pageTitle} />
      <meta name="application-name" content={pageTitle} />
      <meta name="article:author" content={author} />
      <meta name="article:section" content={section} />
      <meta name="article:tag" content={pageKeywords} />
      <meta name="description" content={description} />
      <meta name="image" content={thumb.src} />
      <meta name="keywords" content={pageKeywords} />
      <meta name="og:description" content={description} />
      <meta name="og:image:alt" content={pageTitle} />
      <meta name="og:image:height" content={thumb.height} />
      <meta name="og:image:secure_url" content={thumb.src} />
      <meta name="og:image:type" content="image/jpeg" />
      <meta name="og:image:url" content={thumb.src} />
      <meta name="og:image:width" content={thumb.width} />
      <meta name="og:image" content={thumb.src} />
      <meta name="og:site_name" content={pageTitle} />
      <meta name="og:title" content={pageTitle} />
      <meta name="og:type" content="website" />
      <meta name="og:url" content={siteUrl} />
      <meta name="p:domain_verify" content="" />
      <meta name="robots" content="index, follow" />
      <meta name="theme-color" content={themeColor} />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:creator" content={author} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image:src" content={thumb.src} />
      <meta name="twitter:title" content={pageTitle} />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image:alt"
        content={pageTitle}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image:height"
        content={thumb.height}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image:secure_url"
        content={thumb.src}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image:type"
        content="image/jpeg"
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image:url"
        content={thumb.src}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image:width"
        content={thumb.width}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:image"
        content={thumb.src}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:locale"
        content="en_US"
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:site_name"
        content={siteTitle}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:title"
        content={pageTitle}
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:type"
        content="website"
      />
      <meta
        prefix="og: http://ogp.me/ns#"
        property="og:url"
        content={siteUrl}
      />
      <meta property="fb:app_id" content="" />
      <meta property="og:description" content={description} />
      <meta property="twitter:card" content="summary_large_image" />
      <meta property="twitter:creator" content={author} />
      <meta property="twitter:description" content={description} />
      <meta property="twitter:image:src" content={thumb.src} />
      <meta property="twitter:image" content={thumb.src} />
      <meta property="twitter:title" content={pageTitle} />
      <title>{pageTitle}</title>
    </Helmet>
  );
}

export default SEO;
