// React
import React, { useEffect, useState } from 'react'

// Redux
import { useDispatch, useSelector } from 'react-redux'
// import { actionCreator as shopCartActionCreator } from '../../../store/reducers/ShopCart'
import { ApplicationState } from '../../../store'

import { Container } from 'reactstrap'
import { FeatherIcon } from '../../../components/FeatherIcons'

import style from './scss/style.module.scss'


const Cart = () => {
  const dispatch = useDispatch()
  const { content, shopCart } = useSelector((state: ApplicationState) => state)

  const {
    currencySymbol = ""
  } = content?.localization ? content.localization : {}

  const {
    titleSection = {
      title: "",
      text: ""
    },
    productsSection = {
      product: "",
      price: "",
      quantity: "",
      subtotal: "",
      continueShopping: {
        target: "#",
        anchorText: ""
      },
      submit: {
        title: ""
      }
    }

  } = content?.shopCart ? content.shopCart : {}

  const [subtotal, setSubtotal] = useState<number>(0)

  useEffect(() => {
    if(shopCart?.items) {
      let newSubtotal = 0
      shopCart.items.forEach(item => {
        if(item.quantity)
          newSubtotal += (item.newPrice ? item.newPrice : item.price) * item.quantity
      })
      setSubtotal(newSubtotal)
    }
    
  }, [shopCart?.items])

  return <Container fluid>
    <section className="pt-5 pb-5">
      <div className="row w-100">
        <div className="col-lg-12 col-md-12 col-12">
          <h3 className="display-5 mb-2 text-center">{titleSection.title}</h3>
          <p className="mb-5 text-center"><i className="text-info font-weight-bold">{shopCart?.items ? shopCart.items.length : 0}</i> {titleSection.text}</p>
          <table id="shoppingCart" className="table table-condensed table-responsive">
            <thead>
              <tr>
                <th style={{ width: "60%" }}>{productsSection.product}</th>
                <th style={{ width: "12%" }}>{productsSection.price}</th>
                <th style={{ width: "10%" }}>{productsSection.quantity}</th>
                <th style={{ width: "16%" }}></th>
              </tr>
            </thead>
            <tbody>

              {(shopCart?.items ? shopCart.items : []).map((item, index) => <tr key={index}>
                <td data-th="Product">
                  <div className="row">
                    <div className="col-md-3 text-left">
                      <img src="https://dummyimage.com/250x250/ced4da/6c757d.jpg" alt="" className="img-fluid d-none d-md-block rounded mb-2 shadow" />
                    </div>
                    <div className="col-md-9 text-left mt-sm-2">
                      <h4>{item.title}</h4>
                      <p className="font-weight-light">{item.brandName}</p>
                    </div>
                  </div>
                </td>
                <td data-th="Price">{item.newPrice
                  ? <><span className="text-muted text-decoration-line-through">{currencySymbol}{item.price.toFixed(2)}</span> <span>{currencySymbol}{item.newPrice.toFixed(2)}</span></>
                  : <span>{currencySymbol}{item.price.toFixed(2)}</span>}</td>
                <td data-th="Quantity">
                  <input type="number" className="form-control form-control-lg text-center" value={item.quantity} />
                </td>
                <td className="actions" data-th="">
                  <div className="text-right">
                    <button className="btn btn-white border-secondary bg-white btn-md mb-2">
                      <FeatherIcon icon="trash-2" />
                    </button>
                  </div>
                </td>
              </tr>)}
              
              
            </tbody>
          </table>
          <div className="float-right text-right">
            <h4>{productsSection.subtotal}</h4>
            <h1>{currencySymbol}{subtotal}</h1>
          </div>
        </div>
      </div>
      <div className="row mt-4 d-flex align-items-center">
        <div className="col-sm-6 order-md-2 text-right">
          <a href="catalog.html" className="btn btn-primary mb-4 btn-lg pl-5 pr-5">{productsSection.submit.title}</a>
        </div>
        <div className="col-sm-6 mb-3 mb-m-1 order-md-1 text-md-left">
          <a href={productsSection.continueShopping.target}>
            <FeatherIcon icon="arrow-left" /> {productsSection.continueShopping.anchorText}</a>
        </div>
      </div>
    </section>
  </Container>

}
  
export {
  Cart
}