text: /** @jsx jsx */
  import {jsx, Box, Themed} from 'theme-ui'
  import {Layout} from '../../components/Layout'
  import Seo from '../../components/Seo'
  import {graphql} from 'gatsby'
  import {GraphQLErrorList} from '../../components/GraphQLErrorList'
  import {Product} from '../../components/Shop/Product'
  import {Products} from '../../components/Shop/Products'
  import {Posts} from '../../components/Blog/Posts'
  import {useTranslation} from 'react-i18next'
  import {mapEdgesToNodes, toPlainText, translateRaw} from '../../lib/helpers'
  import {JsonLd} from 'react-schemaorg'
  import {add, format} from 'date-fns'
  import {XInBreton} from '../../components/XInBreton'
  
  const makeSeoTitle = (seoReadyTitle, title, collection) => {
    if (seoReadyTitle) return seoReadyTitle
    if (title) {
      const titles = []
      if (title.toLowerCase().includes(collection.toLowerCase())) {
        titles.push(XInBreton({x: title}))
      } else {
        titles.push(XInBreton({x: title}))
        titles.push(collection)
      }
      return titles.join(`, `)
    }
  }
  
  const ProductPage = ({data, errors, ...props}) => {
    const {
      t,
      i18n: {language},
    } = useTranslation('common')
  
    const {
      product,
      sameCollectionProducts,
      goodies,
      blogPosts,
      site: {
        siteMetadata: {siteUrl},
      },
    } = translateRaw(data, language)
    const {title, seoTitle, images, body, collection, slug, categories, productFeature, releaseDate, reference} = product
    const sameCollectionProductNodes = mapEdgesToNodes(sameCollectionProducts)
    const goodiesNodes = mapEdgesToNodes(goodies)
    const blogPostsNodes = mapEdgesToNodes(blogPosts)
  
    const fullTitle = makeSeoTitle(seoTitle, title, collection.title)
  
    const image = images.images && images.images[0] && images.images[0].asset && images.images[0].asset.url
    const excerpt = body && toPlainText(body)
    const productPath = `/${language}/${collection.slug.current}/${slug.current}`
    const categoriesReduced =
      categories &&
      categories.length > 0 &&
      categories
        .map(c => c.title)
        .reduce((acc, el) => {
          return acc === null ? el : acc + ' > ' + el
        }, null)
    const inStock = productFeature && productFeature.inStock
    const isPreorder = productFeature && productFeature.isForthcoming && productFeature.allowPreorder
    return (
      <Layout {...props}>
        {errors && <Seo title="GraphQL Error" />}
        {product && <Seo title={fullTitle} description={excerpt} image={image} product={true} />}
        {product && (
          <JsonLd
            item={{
              '@context': 'https://schema.org',
              '@type': 'Product',
              name: title,
              url: siteUrl + productPath,
              image,
              description: excerpt ? excerpt : fullTitle,
              gtin13: productFeature && productFeature.barcode && productFeature.barcode.barcode,
              mpn: reference,
              category: categoriesReduced,
              releaseDate,
              offers: {
                '@type': 'Offer',
                priceCurrency: 'EUR',
                priceValidUntil: format(add(new Date(), {years: 1}), 'yyyy-MM-dd'),
                price: productFeature.price.value,
                itemCondition: 'https://schema.org/NewCondition',
                availability: inStock
                  ? 'https://schema.org/InStock'
                  : isPreorder
                  ? 'https://schema.org/PreOrder'
                  : 'https://schema.org/OutOfStock',
                url: siteUrl + productPath,
              },
              brand: {
                '@type': 'Brand',
                name: collection.title,
              },
              sku: inStock ? 10 : 0,
            }}
          />
        )}
        {errors && <GraphQLErrorList errors={errors} />}
  
        {product && <Product {...product} />}
        {sameCollectionProductNodes && sameCollectionProductNodes.length > 0 && (
          <Box mt={[3, 5]}>
            <Themed.h4>{t('shop:in_collection', {collection_title: product.collection.title})}</Themed.h4>
            <Products nodes={sameCollectionProductNodes} fit={false} />
          </Box>
        )}
        {goodiesNodes && goodiesNodes.length > 0 && (
          <Box mt={1}>
            <Themed.h4>{t('shop:to_complete_your_order')}</Themed.h4>
            <Products nodes={goodiesNodes} fit={false} />
          </Box>
        )}
        {blogPostsNodes && blogPostsNodes.length > 0 && (
          <Box mt={3}>
            <Themed.h4>{t('blog:discussed_on_blog')}</Themed.h4>
            <Posts nodes={blogPostsNodes} />
          </Box>
        )}
      </Layout>
    )
  }
  
  export const query = graphql`
    query Product($product: String, $collection: String) {
      product: sanityProduct(id: {eq: $product}) {
        ...productFields
      }
      sameCollectionProducts: allSanityProduct(
        filter: {
          id: {ne: $product}
          collection: {id: {eq: $collection}}
          slug: {fr: {current: {ne: null}}, br: {current: {ne: null}}}
          _id: {regex: "/^(?!draft)/"}
        }
        sort: {order: [DESC, DESC], fields: [defaultProductVariant___inStock, releaseDate]}
        limit: 6
      ) {
        edges {
          node {
            ...productPreviewFields
          }
        }
      }
      goodies: allSanityProduct(
        filter: {
          id: {ne: $product}
          collection: {id: {eq: "-09ca6cfc-f539-5a29-9c12-9cdb3fe0476d"}}
          slug: {fr: {current: {ne: null}}, br: {current: {ne: null}}}
          _id: {regex: "/^(?!draft)/"}
          defaultProductVariant: {inStock: {eq: true}}
        }
        sort: {order: [DESC], fields: [releaseDate]}
      ) {
        edges {
          node {
            ...productPreviewFields
          }
        }
      }
      blogPosts: allSanityBlogPost(
        sort: {fields: [publishedAt], order: DESC}
        filter: {products: {elemMatch: {id: {eq: $product}}}}
      ) {
        edges {
          node {
            ...blogPostPreviewFields
          }
        }
      }
      site {
        siteMetadata {
          siteUrl: url
        }
      }
    }
  `
  
  export default ProductPage
  