text: import React, { useEffect, useState, useRef, useContext } from "react";
  
  import Layout from "../components/layout";
  import Navigation from "../components/navigation";
  import Img from "gatsby-image";
  import BackgroundImage from "gatsby-background-image";
  import { graphql } from "gatsby";
  import StoreContext from "../context/StoreContext";
  import ProductForm from "../components/productForm";
  const ProductPage = ({ data }) => {
    const quanityRef = useRef(0);
    const [quanity, setQuanity] = useState(0);
    const [variants, setVariants] = useState([]);
    const [selectedVariant, setSelectedVariant] = useState(null);
    const [price, setPrice] = useState(null);
  
    const [addedToCartMessage, setAddedToCartMessage] = useState(null);
    useEffect(() => {
      setVariants(data.shopifyProduct.variants);
  
      if (selectedVariant) {
        setPrice(
          variants.filter((variant) => variant.title === selectedVariant.value)[0]
            .price
        );
      }
    }, [selectedVariant]);
  
    useEffect(() => {
      let options = data.shopifyProduct.options.filter(
        (option) => option.name === "Title"
      );
  
      if (options.length > 0) {
        setSelectedVariant({
          option: "Title",
          value: data.shopifyProduct.variants[0].title,
        });
      }
      document.title = `Pep Khaoula - ${data.shopifyProduct.title}`;
    }, []);
    return (
      <Layout>
        <Navigation links={data.dataJson.mainMenu} />
        <section className="text-gray-700 body-font overflow-hidden md:pt-24">
          <div className="container px-5  mx-auto">
            {addedToCartMessage ? <div>{addedToCartMessage}</div> : null}
            <div className="llg:w-full mx-auto flex flex-wrap">
              <Img
                fluid={
                  data.shopifyProduct.images[0].localFile.childImageSharp.fluid
                }
                className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
                alt=""
              />
              <div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
                <h2 className="text-sm title-font text-gray-500 tracking-widest">
                  {data.shopifyCollection.title}
                </h2>
                <h1 className="text-gray-900 text-3xl title-font font-medium mb-1">
                  {data.shopifyProduct.title}
                </h1>
                <div className="flex mb-4">
                  <span className="flex items-center">
                    <svg
                      fill="currentColor"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      className="w-4 h-4 text-indigo-500"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                    </svg>
                    <svg
                      fill="currentColor"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      className="w-4 h-4 text-indigo-500"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                    </svg>
                    <svg
                      fill="currentColor"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      className="w-4 h-4 text-indigo-500"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                    </svg>
                    <svg
                      fill="currentColor"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      className="w-4 h-4 text-indigo-500"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                    </svg>
                    <svg
                      fill="none"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      className="w-4 h-4 text-indigo-500"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                    </svg>
                    <span className="text-gray-600 ml-3">4 Reviews</span>
                  </span>
                  <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200">
                    <a className="text-gray-500">
                      <svg
                        fill="currentColor"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        className="w-5 h-5"
                        viewBox="0 0 24 24"
                      >
                        <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                      </svg>
                    </a>
                    <a className="ml-2 text-gray-500">
                      <svg
                        fill="currentColor"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        className="w-5 h-5"
                        viewBox="0 0 24 24"
                      >
                        <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
                      </svg>
                    </a>
                    <a className="ml-2 text-gray-500">
                      <svg
                        fill="currentColor"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        className="w-5 h-5"
                        viewBox="0 0 24 24"
                      >
                        <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
                      </svg>
                    </a>
                  </span>
                </div>
                <h2 className="text-sm title-font text-gray-500 tracking-widest">
                  Description
                </h2>
                <p className="leading-relaxed">
                  {data.shopifyProduct.description}
                </p>
  
                <ProductForm product={data.shopifyProduct} />
              </div>
            </div>
          </div>
        </section>
      </Layout>
    );
  };
  export const query = graphql`
    query($handle: String!, $shopifyId: String) {
      shopifyProduct(handle: { eq: $handle }) {
        id
        title
        handle
        productType
        description
        descriptionHtml
        shopifyId
        options {
          id
          name
          values
        }
        variants {
          id
          title
          price
          availableForSale
          shopifyId
          selectedOptions {
            name
            value
          }
        }
        priceRange {
          minVariantPrice {
            amount
            currencyCode
          }
          maxVariantPrice {
            amount
            currencyCode
          }
        }
        images {
          localFile {
            childImageSharp {
              fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      }
      dataJson {
        mainMenu {
          name
          path
        }
      }
  
      shopifyCollection(
        products: { elemMatch: { shopifyId: { eq: $shopifyId } } }
      ) {
        title
        handle
      }
    }
  `;
  
  export default ProductPage;
  