text: import React from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  
  import * as CartActions from '../../store/modules/cart/actions';
  
  import { formatPrice } from '../../util/format';
  import colors from '../../styles/colors';
  
  import {
    Body,
    Container,
    Products,
    Product,
    ProductInfo,
    ProductImage,
    ProductDetails,
    ProductTitle,
    ProductPrice,
    ProductDelete,
    ProductControls,
    ProductControlButton,
    ProductAmount,
    ProductSubtotal,
    TotalContainer,
    TotalText,
    TotalAmount,
    Order,
    OrderText,
    EmptyContainer,
    EmptyText,
  } from './styles';
  
  function Cart() {
    const products = useSelector(state =>
      state.cart.map(product => ({
        ...product,
        subtotal: formatPrice(product.price * product.amount),
      }))
    );
  
    const totalPrice = useSelector(state =>
      formatPrice(
        state.cart.reduce(
          (total, product) => total + product.price * product.amount,
          0
        )
      )
    );
  
    const dispatch = useDispatch();
  
    function decrement(product) {
      dispatch(CartActions.updateAmountRequest(product.id, product.amount - 1));
    }
  
    function increment(product) {
      dispatch(CartActions.updateAmountRequest(product.id, product.amount + 1));
    }
  
    return (
      <Body>
        <Container>
          {products.length ? (
            <>
              <Products>
                {products.map(product => (
                  <Product key={product.id}>
                    <ProductInfo>
                      <ProductImage source={{ uri: product.image }} />
                      <ProductDetails>
                        <ProductTitle>{product.title}</ProductTitle>
                        <ProductPrice>{product.priceFormatted}</ProductPrice>
                      </ProductDetails>
                      <ProductDelete
                        onPress={() =>
                          dispatch(CartActions.removeFromCart(product.id))
                        }
                      >
                        <Icon
                          name="delete-forever"
                          size={24}
                          color={colors.primary}
                        />
                      </ProductDelete>
                    </ProductInfo>
                    <ProductControls>
                      <ProductControlButton onPress={() => decrement(product)}>
                        <Icon
                          name="remove-circle-outline"
                          size={20}
                          color={colors.primary}
                        />
                      </ProductControlButton>
                      <ProductAmount value={String(product.amount)} />
                      <ProductControlButton onPress={() => increment(product)}>
                        <Icon
                          name="add-circle-outline"
                          size={20}
                          color={colors.primary}
                        />
                      </ProductControlButton>
                      <ProductSubtotal>{product.subtotal}</ProductSubtotal>
                    </ProductControls>
                  </Product>
                ))}
              </Products>
              <TotalContainer>
                <TotalText>TOTAL</TotalText>
                <TotalAmount>{totalPrice}</TotalAmount>
                <Order>
                  <OrderText>FINALIZAR PEDIDO</OrderText>
                </Order>
              </TotalContainer>
            </>
          ) : (
            <EmptyContainer>
              <Icon name="remove-shopping-cart" size={64} color="#eee" />
              <EmptyText>Seu carrinho está vazio.</EmptyText>
            </EmptyContainer>
          )}
        </Container>
      </Body>
    );
  }
  
  export default Cart;
  