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

// Redux
import { useDispatch, useSelector } from 'react-redux'
import { actionCreators as loaderActionCreators } from '../../../store/reducers/Loader'
import { actionCreators as shopCartActionCreators } from '../../../store/reducers/ShopCart'
import { ApplicationState } from '../../../store'

import { Button, Col, Container, Input, InputGroup, Row } from 'reactstrap'
import { Link } from 'react-router-dom'
import { FeatherIcon } from '../../../components/FeatherIcons'

import style from './scss/style.module.scss'
import { ReservedWords } from '../../../enumerations'

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


  useEffect(() => {
    dispatch(shopCartActionCreators.requestCart({ pathParams: { userId: "fdc5aa50-ee68-4bae-a8e6-b8ae2c258f60" }}))
  }, [])


  useEffect(() => {
    content?.isLoading
      ? dispatch(loaderActionCreators.show())
      : setTimeout(() => {
        dispatch(loaderActionCreators.hide())
      }, 1000)
  }, [content?.isLoading])

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

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

  } = 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])


  const onPlus = () => {
    
  }

  const onMinus = () => {

  }

  const onDelete = () => {

  }

  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" dangerouslySetInnerHTML={{ __html: (titleSection.text ? titleSection.text : "").replace(ReservedWords.quantity, shopCart?.items ? `${shopCart.items.length}` : "0") }}></p>
          <table id="shoppingCart" className="table table-condensed table-responsive">
            <thead>
              <tr>
                <th style={{ width: "75%" }}>{productsSection.product}</th>
                <th style={{ width: "10%" }}>{productsSection.price}</th>
                <th style={{ width: "10%" }}>{productsSection.quantity}</th>
                <th style={{ width: "5%" }}></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">
                  <InputGroup>
                    <Button onClick={onPlus}>-</Button>
                    <Input type="number" value={item.quantity} />
                    <Button onClick={onMinus}>+</Button>
                  </InputGroup>
                </td>
                <td className="actions" data-th="">
                  <div className="text-right">
                    <button className="btn btn-white border-secondary bg-white btn-md mb-2" onClick={onDelete}>
                      <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>
      <Row className="mt-4 d-flex align-items-center">
        <Col sm-6 className=" order-md-2 text-right">
          <Link  className="btn btn-primary mb-4 btn-lg pl-5 pr-5" to={productsSection.checkout.target}>{productsSection.checkout.anchorText}</Link>
        </Col>
        <Col sm-6 className="mb-3 mb-m-1 order-md-1 text-md-left">
          <Link to={productsSection.continueShopping.target}><FeatherIcon icon="arrow-left" /> {productsSection.continueShopping.anchorText}</Link>
        </Col>
      </Row>
    </section>
  </Container>
}
  
export {
  Cart
}