import './src/style.css'
import 'prismjs/themes/prism.css'

import React from "react"
import { CartProvider } from 'use-shopping-cart'

export const wrapRootElement = ({ element }) => {
  return (
    <CartProvider
      mode={"payment"}
      cartMode={"client-only"}
      stripe={process.env.GATSBY_STRIPE_PUBLISHABLE_KEY}
      successUrl={'https://hi1t0.com/checkout-success'}
      cancelUrl={'https://hi1t0.com/cart'}
      currency={'jpy'}
    >
      <dialog id="add-to-cart" className={`add-to-cart`}>カートに入れました</dialog>
      {element}
    </CartProvider>
  )
}

document.getElementById('add-to-cart').showModal()

...

setTimeout(() => {
      document.getElementById('add-to-cart').close()
    }, 1000)

...

import React, { useState } from "react"
import { useShoppingCart } from 'use-shopping-cart'

...

const ProductCard = ({ product }) => {
  const [loading, setLoading] = useState(false)
  const [priceId, setPriceId] = useState(product.prices[0]?.id)
  const { checkoutSingleItem, addItem } = useShoppingCart()

  const onChangePrice = event => {
    setPriceId(event.target.value)
  }

  const handleAddItem = event => {
    setLoading(true)
    document.getElementById('add-to-cart').showModal()
    // price_idからpriceオブジェクトをフィルターする
    const priceIndex = product.prices.findIndex(p => p.id === priceId)
    const item = product.prices[priceIndex]
    addItem({price_id: item.id, price: item.unit_amount, currency: item.currency, name: product?.name,})
    setTimeout(() => {
      document.getElementById('add-to-cart').close()
      setLoading(false)
    }, 1000)
  }

  const handleSubmit = async event => {
    ...
  }

  return (
    <div className="column is-6">
      <form onSubmit={handleSubmit} className="has-text-centered">
        <div style={cardStyles}>
          {
            product.images.length > 0 ?
            <img src={product.images[0]} alt={product.name}/>
            : ''
          }
          <fieldset style={cardMain}>
            <legend style={legendStyles}>
              <h4>{product.name}</h4>
              <p>{product.description}</p>
            </legend>
            <label style={priceStyles}>
              価格{" "}
              <select name="priceSelect" style={selectBox} onChange={onChangePrice}>
                {product.prices.map(price => (
                  <option key={price.id} value={price.id}>
                    {formatPrice(price.unit_amount, price.currency)}
                  </option>
                ))}
              </select>
            </label>
          </fieldset>
          <button
            type="button"
            onClick={(e) => handleAddItem(e)}
            disabled={loading}
            style={
              loading
                ? { ...buttonStyles, ...buttonDisabledStyles }
                : buttonStyles
            }
          >
            追加する
          </button>
          <button
            disabled={loading}
            style={
              loading
                ? { ...buttonStyles, ...buttonDisabledStyles }
                : buttonStyles
            }
          >
            今すぐ買う
          </button>
        </div>
      </form>
    </div>
  )
}

export default ProductCard