text: /* eslint-disable camelcase */
  import React, {useState, useContext, useEffect} from 'react'
  import SEO from '../components/SEO'
  import CartItemList from '../components/CartItemList'
  import CartSummary from '../components/CartSummary'
  import CartContext from '../components/Context/CartContext'
  import Layout from '../components/Layout'
  import {Modal} from "semantic-ui-react"
  
  const Moltin = require('../../lib/moltin')
  
  const Cart = ({location}) => {
    const [loading, setLoading] = useState(true)
    const [items, setItems] = useState([])
    const [completed, setCompleted] = useState(false)
    const [meta, setMeta] = useState({})
    const [cartId, setCartId] = useState({})
    const [error, setError]= useState(false)
    const [actualProducts, setActualProducts]= useState()
    const {updateCartCount} = useContext(CartContext)
  
    async function getCartItems() {
      const cartIdLocal = await localStorage.getItem('mcart')
      await Moltin.getCartItems(cartIdLocal).then(({data, meta}) => {
        setItems(data)
        setCartId(cartIdLocal)
        setMeta(meta)
        setLoading(false)
      })
    }
  
    useEffect(() => {
      getCartItems()
    }, [])
  
    const handleCheckout = async data => {                                                                
      const cartId = await localStorage.getItem('mcart')
      const customerId = localStorage.getItem('mcustomer')
      const {
        id: token,
        email,
        name,
        phone,
        ci,
        city,
  
        // Información que no será usado pero es requerido para moltin
        line_1,
        country,
        county,
        postcode,
      } = data
  
      const customer = customerId || {name, email}
  
      const address = {
        first_name: name.split(' ')[0],
        last_name: name.split(' ')[1] || '',
        line_1: line_1 || "",
        city: city,
        ci: ci,
        phone_number: phone,
        county: county || '',
        country: country || "",
        postcode: postcode || "000000",
      }
      try {
        const {
          data: {id},
        } = 
        await Moltin.checkoutCart(cartId, customer, address)
        await Moltin.updateOrder(id, {ci: ci}) // Documento de Identidad
        await Moltin.payForOrder(id, token, email)
  
        Moltin.ordersToProducts(id).then((itemProducts)=>{
          setActualProducts(itemProducts)
        })
        setCompleted(true)
        updateCartCount(0, cartId)
      } catch (e) {
        console.log(e)
        setError(true)
        setCompleted(true)
      }
    }
  
    const handleRemoveFromCart = itemId => {
      Moltin.removeFromCart(itemId, cartId).then(({data, meta}) => {
        const total = data.reduce((a, c) => a + c.quantity, 0)
        updateCartCount(total, cartId)
        setItems(data)
        setMeta(meta)
      })
    }
  
    const rest = {completed, items, loading, cartId}
  
    return (
      <Layout location={location}>
        <SEO title="Cart" />
        <CartItemList
          {...rest}
          removeFromCart={item => handleRemoveFromCart(item)}
          error={error}
          actualProducts={actualProducts}
        />
        {!loading && !completed && (
          <CartSummary {...rest} {...meta} handleCheckout={handleCheckout} />
        )}
      </Layout>
    )
  }
  
  export default Cart
  