text: import React from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { FlatList } from 'react-native';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  
  import colors from '../../styles/colors';
  import { formatPrice } from '../../util/format';
  
  import * as CartActions from '../../store/modules/cart/actions';
  
  import {
    Container,
    Product,
    ProductInfo,
    ProductImage,
    ProductDetails,
    ProductTitle,
    ProductPrice,
    ProductDelete,
    ProductControls,
    ProductControlButton,
    ProductAmount,
    ProductSubtotal,
    TotalContainer,
    TotalText,
    TotalPrice,
    Order,
    OrderText,
    EmptyContainer,
    EmptyText,
  } from './styles';
  
  function Cart({ cart, total, removeFromCart, updateAmountRequest }) {
    function increment(product) {
      updateAmountRequest(product.id, product.amount + 1);
    }
  
    function decrement(product) {
      updateAmountRequest(product.id, product.amount - 1);
    }
  
    return (
      <Container>
        {cart.length ? (
          <>
            <FlatList
              style={{ height: 380}}
              showsVerticalScrollIndicator={false}
              data={cart}
              keyExtractor={item => item.id.toString()}
              renderItem={({ item }) => (
                <Product key={item.id}>
                <ProductInfo>
                  <ProductImage source={{ uri: item.image }} />
                  <ProductDetails>
                    <ProductTitle>{item.title}</ProductTitle>
                    <ProductPrice>{item.priceFormatted}</ProductPrice>
                  </ProductDetails>
                  <ProductDelete onPress={() => removeFromCart(item.id)}>
                    <Icon
                      name="delete-forever"
                      size={24}
                      color={colors.primary}
                    />
                  </ProductDelete>
                </ProductInfo>
                <ProductControls>
                  <ProductControlButton onPress={() => decrement(item)}>
                    <Icon
                      name="remove-circle-outline"
                      size={20}
                      color={colors.primary}
                    />
                  </ProductControlButton>
                  <ProductAmount value={String(item.amount)} />
                  <ProductControlButton onPress={() => increment(item)}>
                    <Icon
                      name="add-circle-outline"
                      size={20}
                      color={colors.primary}
                    />
                  </ProductControlButton>
                  <ProductSubtotal>{item.subtotal}</ProductSubtotal>
                </ProductControls>
              </Product>
              )}
            />
            <TotalContainer>
              <TotalText>TOTAL</TotalText>
              <TotalPrice>{total}</TotalPrice>
              <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>
    );
  }
  
  const mapStateToProps = (state) => ({
    cart: state.cart.map((product) => ({
      ...product,
      subtotal: formatPrice(product.price * product.amount),
    })),
    total: formatPrice(
      state.cart.reduce((total, product) => {
        return total + product.price * product.amount;
      }, 0)
    ),
  });
  
  const mapDispatchToProps = (dispatch) =>
    bindActionCreators(CartActions, dispatch);
  
  export default connect(mapStateToProps, mapDispatchToProps)(Cart);
  