text: import React from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import {
    MdRemoveCircleOutline,
    MdAddCircleOutline,
    MdDelete,
  } from 'react-icons/md';
  import Swal from 'sweetalert2';
  import * as CartActions from '../../store/modules/cart/actions';
  import { formatPrice } from '../../util/format';
  import { Container, ProductTable, Total } from './styles';
  
  export default function Cart() {
    const total = useSelector((state) =>
      formatPrice(
        state.cart.reduce(
          (sumTotal, product) => sumTotal + product.price * product.amount,
          0
        )
      )
    );
  
    const cart = useSelector((state) =>
      state.cart.map((product) => ({
        ...product,
        subtotal: formatPrice(product.price * product.amount),
      }))
    );
  
    const dispatch = useDispatch();
  
    function increment(product) {
      dispatch(CartActions.updateAmountRequest(product.id, product.amount + 1));
    }
  
    function decrement(product) {
      dispatch(CartActions.updateAmountRequest(product.id, product.amount - 1));
    }
  
    function finishOrder() {
      Swal.fire({
        icon: 'error',
        title: 'Oooops!',
        text:
          'Não foi possível realizar essa ação pois essa não é uma loja de verdade...',
        confirmButtonColor: '#e60efe',
        confirmButtonText: 'ᕕ(◉_◉)ᕗ Fugir para às colinas',
      });
    }
  
    const Content = () => (
      <>
        <ProductTable>
          <thead>
            <tr>
              <th />
              <th>Produto</th>
              <th>Qtd</th>
              <th>Subtotal</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {cart.map((product) => (
              <tr key={product.id}>
                <td>
                  <img src={product.image} alt={product.title} />
                </td>
                <td>
                  <strong>{product.title}</strong>
                  <span>{product.priceFormatted}</span>
                </td>
                <td>
                  <div>
                    <button type="button">
                      <MdRemoveCircleOutline
                        size={20}
                        color="#e60efe"
                        onClick={() => decrement(product)}
                      />
                    </button>
                    <input type="number" readOnly value={product.amount} />
                    <button type="button">
                      <MdAddCircleOutline
                        size={20}
                        color="#e60efe"
                        onClick={() => increment(product)}
                      />
                    </button>
                  </div>
                </td>
                <td>
                  <strong>{product.subtotal}</strong>
                </td>
                <td>
                  <button
                    type="button"
                    onClick={() =>
                      dispatch(CartActions.removeFromCart(product.id))
                    }
                  >
                    <MdDelete size={20} color="#e60efe" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </ProductTable>
  
        <footer>
          <button type="button" onClick={finishOrder}>
            Finalizar pedido
          </button>
  
          <Total>
            <span>Total</span>
            <strong>{total}</strong>
          </Total>
        </footer>
      </>
    );
  
    const NoContent = () => (
      <div>
        <h1>Carrinho vazio</h1>
        <span>¯\_(ツ)_/¯</span>
      </div>
    );
  
    return <Container>{cart.length ? <Content /> : <NoContent />}</Container>;
  }
  